0

ボタンをクリックするとコンボボックスが表示され、コンボボックスを選択すると表示されます。変更イベントが呼び出されていません。

どこで間違いを犯しているのか教えてください。

<html>
<head>
<script src="jquery17.js" type="text/javascript"></script>
<script>
  $("select").change(function(){
        alert(this.id);
    });

$(document).ready(function(){
  $("button").click(function(){
   var s = $('<select />');
   var data = {
    'foo': 'bar',
    'foo2': 'baz'
}
for(var val in data) {
   $('<option />', {value: val, text: data[val]}).appendTo(s);
}
s.appendTo('body');
 });
});
</script>
</head>
<body>
<div id="div1"></div>
<button>Get External Content</button>
</body>
</html>
4

3 に答える 3

3 
$(document).on("change", "select", function(){
        alert($(this).attr("id"));
});

<select>タグは動的に追加されるため、イベントを委任する必要があります。

于 2013-01-31T06:41:18.077 に答える
1 
$("select").change(function(){
    alert(this.id);
});

$(document).ready(function(){問題は、ブロック内でこれを行わないことです。

そこに移動します。そうしないと、まだ存在しないDOM要素にイベントハンドラーを設定することになります。

于 2013-01-31T06:42:17.577 に答える
1

あなたはdoc readyそれをbodyに追加する必要がありますが、それらをbodyに追加した後、それは動的であるため、すべての親であるclosest parent elementまたはそれ自体にイベントを委任します。document

<script>
  $(document).ready(function(){
      $("button").click(function(){
           var s = $('<select />');
           var data = {
                 'foo': 'bar',
                 'foo2': 'baz'
            }
           for(var val in data) {
               $('<option />', {value: val, text: data[val]}).appendTo(s);
            }
          s.appendTo('body');
       });

       // you need to place that here.
             $(document).on('change', 'select', function(){
                 alert(this.id);
             });

    });

于 2013-01-31T06:49:42.317 に答える