Question

全部，我有以下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/

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

提前感谢您的任何建议！

Answer 1

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

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

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

这样，JQuery将监听容器并使用.event_selection类监视每个DOM元素。

Answer 2

我也注意到了这种行为，并通过将“.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();
    }
});

Answer 3

尝试：

$(document).on('change', '.event_selection', function(){
    if (this.value == "delete") {
        $("#row"+this.id.split('_')[1]).remove();
    }
});

对于新添加的行，更改不起作用

3 个答案: