2 
$(document).ready(function() {
    $('[id^=drop_id]').on('change', function() {
        selected = $(this).find('option:selected').data('tid')   
        $.getJSON('path/'+selected,function(data){
        var s = $("<select id='drop_id_goddamnit' name=\"name\" />");
        $(data).each(function() {
          var option = $('<option />');
          option.attr('value', this.taxon.permalink).text(this.taxon.name).attr('data-tid',this.taxon.id);
          option.appendTo(s);
        });
        $('#header').append($(s));
    });
  });
});

私はこのコードを持っています.これは、既存のドロップダウンの選択された値に従ってドロップダウンを追加します.また、新しく作成されたドロップダウンには、別のドロップダウンを生成するための同じ変更イベントがあります.しかし、動的に生成された選択ボックスはイベントを発生させません.

何をすべきか？

4

3 に答える 3

5

イベント委任の場合、新しく作成された要素は変更イベントを取得しません。次の方法を試してください。

$(document).on('change', '[id^="drop_id"]', function(){
    //your corresponding code.
});

ドキュメントがロードされたときに要素が dom に存在しなかったため、直接イベント バインディングは新しく挿入された dom elem に影響しません。$(document)そのため、他のすべての要素の親である 、または dom がロードされたときに利用可能だった最も近い既存の親のいずれかにイベントを委譲する必要があります。

したがって、最終的なコードは次のようになります。

$(document).on('change', '[id^="drop_id"]', function() {
    selected = $(this).find('option:selected').data('tid')   
    $.getJSON('path/'+selected,function(data){
    var s = $("<select id='drop_id_goddamnit' name=\"name\" />");
    $(data).each(function() {
      var option = $('<option />');
      option.attr('value', this.taxon.permalink).text(this.taxon.name).attr('data-tid',this.taxon.id);
      option.appendTo(s);
    });
    $('#header').append($(s));
});
于 2013-03-21T17:40:08.260 に答える
1

コードは次のように変更する必要があります。イベントを DOM の既存の要素にバインドします。次に、子要素を探します。.on メソッドを使用して、イベント委譲についていくつかの読み取りを行う必要があります。

jQuery 1.7 の時点で、.delegate() は .on() メソッドに取って代わられました。ただし、以前のバージョンでは、イベント委任を使用する最も効果的な手段であり続けています。イベントバインディングと委譲の詳細については、.on() メソッドを参照してください。

以下に置き換え$('[id^=drop_id]').on('change', function() {ます

 $('#parentid').on('change', '[id^=drop_id]', function() {

コードの問題は、新しく追加された要素にイベントがバインドされていないことです。

続きを読む

于 2013-03-21T17:37:37.797 に答える
0

この新しいドロップダウンにバインドされた onchange イベントはどこにもありません。ページの準備ができたら、onchange バインディングのみが発生します。ページに追加された後、新しいドロップダウンに onchange を明示的にバインドする必要があります。

于 2013-03-21T17:39:57.597 に答える