1

この html は chrome で完全に動作しますが、IE では動作しません

ファイルは非常にシンプルで、機能は 2 つだけです

1: 追加ボタンをクリックすると、最初の行が複製され、追加ボタンの前に配置されます

2: コンボ ボックスをクリックすると、2 番目のオプションが削除されます。

今問題は機能2です

1. IE でこのページを読み込み、追加ボタンをクリックしてコンボ ボックスを追加します。

2. 最初のコンボ ボックスをクリックすると、コンボ ボックスに 2 番目のオプションが表示されません (これは正しい結果です)。

3. 2 番目のコンボ ボックスまたは他の複製されたコンボ ボックスをクリックすると、2 番目のオプションがコンボ ボックスに残っているので、削除されません。(これは正しい結果ではありません)

4 . 開発者ツールでソースを見ると、2 番目のオプションが削除されていることがわかります。

では、IE でオプションを削除するにはどうすればよいでしょうか。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(document).ready
(
    function()
    {
        $('#add').click(function(){
                        $(this).parent().parent().before($('tr').eq(0).clone(true));
        });
        $('select').focus(function(){
                        $(this).find('option').eq(1).remove();
        });
    }
);
</script>
</head>
<body>
<table>
    <tr>
        <td>
            <select>
                <option>1</option><option>2</option><option>3</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input id="add" type="button" value="add"/></td>
    </tr>
</table>
</body>
</html>
4

3 に答える 3

0

私のためにうまくいった。
これは私が変更したものです：

<script type="text/javascript">
    $(window).load(function(){
        $('#add').on('click', function(){
            $(this).parent().parent().before($('tr').eq(0).clone(true));
        });

        $('select').on('focus', function(){
            $(this).find('option').eq(1).remove();
        });
    });
</script>

これが全ページで、より「標準的な」コードが含まれています

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $('#add').on('click', function(){
                $('#formclone').append($('.myselect').eq(0).clone(true));
            });

            $('select').on('focus', function(){
                $(this).find('option').eq(1).remove();
            });
        });
    </script>
</head>

<body>
<div id="divform">
    <form class="myform">
        <select class="myselect">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <input id="add" type="button" value="add">
    </form>
</div>
<p>
    <div id="divclone">
        clones: 
        <form id="formclone"></form>
    </div>
</p>
</body>

</html>
于 2012-04-24T12:46:33.527 に答える
0

最初の機能は、イベントハンドラーがその時点でDOMにある唯一の「select」に接続されているためです。次に、[追加]をクリックすると、新しい'select'要素がDOMに追加されますが、その要素にはイベントハンドラーがアタッチされていません。私はあなたの質問を誤解したかもしれません、これが事実であるかどうか私に知らせてください。

あなたが明確な仕様を提供するならば、私はそれがどのように行われることができるかについての短いサンプルを書くことができます。

于 2012-04-24T12:17:58.970 に答える
0 
        $('select').live('focus',function(){
        $(this).find('option').eq(1).remove();
        });

ライブで使うとうまくいくかもしれません。

于 2012-04-24T12:05:37.173 に答える