Question

点击时，我的按钮btndel无效。

这是脚本：

$('#btnadd').bind('click', function() {
    var scount = $("#support-list").find('li').length;
    var tmpStr = $('#txtaddsupportname').val();
    var str = “<li>";
    var str += “<img src='../wp-content/plugins/hamaJob/admin/assets/image/arrow.png'  width='16' height='16' class='handle'/>";

    str += "<strong alt="+ scount +">" + tmpStr + "</strong>";
    str += "<input type='button' id='btndel'/>";
    str += "</li>";

    $('#support-list').append(str);
});

$('#btndel').bind('click', function(){
      alert(this);
});

但是，这个脚本确实有效：

str += "<input type='button' id='btndel' onclick='btndel(this)'/>";
btndel = function(e){ alert(this); }

有人可以解释一下这个区别吗？

Answer 1

问题在于您绑定点击事件。第一个示例是，当用户单击按钮btndel时，您可以创建元素btnadd。所以，当这个函数被调用时

$('#btndel').bind('click', function(){
  alert(this);
});

该元素不在DOM中，以便jQuery将处理程序绑定到元素。

第二个例子有效，因为你创建了一个引用一个函数的元素。

如果您在创建元素后更新第一个使用event delegation或致电bind，则会有效。

这是一个演示两者的小提琴：http://jsfiddle.net/Z4ajL/

Answer 2

新添加的删除按钮不在DOM中，这就是第一个示例无效的原因。使用.delegate()

检查此更新的代码jsfiddle

$('#btnadd').bind('click', function() {
    var scount = $("#support-list").find('li').length;
    var tmpStr = $('#txtaddsupportname').val();
    var str = "<li>";
     str += "<img src='../wp-content/plugins/hamaJob/admin/assets/image/arrow.png'  width='16' height='16' class='handle'/>";

    str += "<strong alt="+ scount +">" + tmpStr + "</strong>";
    str += "<input type='button' id='btndel'/>";
    str += "</li>";

   $('#support-list').append(str);
});
$( "#support-list" ).delegate( "#btndel", "click", function(){  
      alert(this);
});

Answer 3

<强> Demo Fiddle
的jQuery

$(document).on('click','#btndel', function(){
      alert(this);
});

点击事件不适用于按钮

3 个答案: