0

所有，我有以下 jQuery 代码：

jQuery("#add_timeline_row").on("click", function(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
    var total_rows = jQuery('[name="timeline_num[]"]').length;
    alert(total_rows);
    total_rows = total_rows + 1;
    jQuery.post(site_url + "add_row.php", { total: total_rows },
        function(response) {
            jQuery('#timeline_table tr:last').after(response);
        });
});

如果用户单击按钮，这可以正常工作，并且基本上在我的 DOM 完成加载后添加一行。我添加了 .on 函数，以便 jQuery 识别它，因为 DOM 已经加载。我的问题是它创建了一个选择字段。然后，如果选择了某个选择值，我将使用以下 jQuery 删除一行：

jQuery('.event_selection').on('change' ,function(){
    var selected_event = jQuery(this).val();
    var fullId = jQuery(this).attr('id');
    var event_id = fullId.split('_');
    if(selected_event=="delete"){
        jQuery("#row"+event_id[1]).remove();
    }
});

对于在 DOM 中添加的任何行，这些行都会被删除，但是对于我通过我的第一个 jQuery 片段添加的任何新行，更改不会得到重新识别。为什么这不能按我的预期工作？

编辑： 我为此创建了一个 JS 小提琴。可以在这里找到：http: //jsfiddle.net/Kc5R8/

单击“添加新行”后，它会失去所有功能，并且在更改新下拉框时不会产生警报。

感谢您提前提供任何建议！

4

3 回答 3

1

您必须将 on 方法绑定到容器，然后指定选择器。

看看 http://jsfiddle.net/ZFGFv/2/

jQuery('table').on('change', '.event_selection' ,function(){
    ... your code
});

​这样，JQuery 将监听容器并监视每个具有 .event_selection 类的 DOM 元素。

于 2012-07-05T20:53:46.040 回答
0

尝试：

$(document).on('change', '.event_selection', function(){
    if (this.value == "delete") {
        $("#row"+this.id.split('_')[1]).remove();
    }
});
于 2012-07-05T19:17:23.537 回答
0

我也注意到了这种行为，并通过将“.on”的调用更改为“.live”来解决它

jQuery('.event_selection').live('change' ,function(){
    var selected_event = jQuery(this).val();
    var fullId = jQuery(this).attr('id');
    var event_id = fullId.split('_');
    if(selected_event=="delete"){
        jQuery("#row"+event_id[1]).remove();
    }
});
于 2012-07-05T19:12:18.663 回答