Question

我通过jquery动态创建了表行，我还在每一行上添加了一个删除按钮，并在此按钮上添加一个事件，当我们点击该按钮时，该按钮将删除与该按钮对应的行（在一行中），但是我的问题只是上面三个按钮处于活动状态并被触发，而最后的按钮无法工作。

$(function(){ 
    $('<input></input>')
        .attr({'type': 'button'})
        .val("Remove")
        .appendTo('table#AllSelectedTest tbody tr:first td:last')
    ; 
});

$(document).ready(function() { 
    $("table#AllSelectedTest tbody tr input").live({
        click: function(){
            $(this).closest('tr').remove(); 
        }
    })
});

我使用上面的代码生成按钮并将其与事件绑定。我的问题是一些按钮工作，一些不是

Answer 1

给元素一个id总是好的。尝试更改以下代码

$(document).ready(function(){   
   $('<input>').attr({type: 'button', id:"remove_button", value:'Remove'})
                     .appendTo('table#AllSelectedTest tbody tr:first td:last');

   $("#remove_button").live("click", function(){
                         $(this).closest('tr').remove();
        });
});

小提琴示例：http://jsfiddle.net/vSUYj/1/

如果您使用的是高于1.7的jquery，请使用on代替live。

更新：尝试此操作，以防无法正常工作

 $(document).ready(function(){   
       var elem = $('table#AllSelectedTest tbody tr:first td:last');
       elem.append('<input type="button" id="remove_button" value="Remove"/>');

     $("#remove_button").live("click", function(){
         $(this).closest('tr').remove();
     });
 });

小提琴示例：http://jsfiddle.net/vSUYj/

Answer 2

如果没有看到您的代码，就无法肯定地说，但您是否使用.live()或.delegate()为这些按钮分配处理程序？

编辑：还应注意，这些方法在最新版本的jquery中已弃用，新方法为.on()

动态创建的按钮无法正常工作

2 个答案: