Question

我有

<button type="button" id="add">Add</button>

和

$('#add').click(function(e){}

作品

但是，当我有

时

<li class="ui-state-default">
    <button type="button" id="remove" class="removeBtn">Delete</button>

并且这样做了：

$('#remove').click(function(e){}

它不起作用。

我正在使用alert（）测试两者，看看是否有函数。第一个按钮动态添加字段并正常工作，而第二个按钮是特定添加字段的删除。这里似乎有什么问题？ o.O

Answer 1

由于元素在DOM加载时不存在，因此click事件不会绑定到它

$('#remove').click(function(e){}

将此更改为

$(document).on('click','.remove',function(e){}

您无法使用id删除按钮。id仅适用于唯一元素。在这里，您需要为每个li删除按钮。因此，请使用.remove代替#remove。（将ID更改为类）

Answer 2

首先，如果您使用add按钮添加多个元素，最终会有几个具有相同#remove ID的元素，这不应该发生。其次，使用事件委托将点击绑定添加到动态生成的元素。

$("#myUl").on("click", ".removeBtn", function(){
   $(this).parent().remove();
});

Answer 3

使用event delegation method动态添加jquery代码。

示例：

 // attach a directly bound event
    $( "#list a" ).on( "click", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
    });

    // attach a delegated event
    $( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
    });

Answer 4

 $('#remove').click(function(e){})

   please try this below instead of above

     $(document).on('click','.remove',function(e){})

        or 

        // depreciated in jquery 1.7 and 1.9 pelase in jquery below 1.7
        $('body .remove').live('click',function(e){})

jquery点击不起作用 - 动态添加/删除字段

4 个答案: