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

这是一个事件委托的情况，新创建的elems不会得到change事件，试试这个方法：

$(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 回答