Question

我正在追加Jquery的项目。但附加后无法绑定附加项上的事件。我附加如下＆gt;＆gt;

var item =  '<div id="'+newInputId+'" class="col-md-9" style="padding-right: 0px;">';
    item += '<input id="txtInScope" type="text" value="'+currentScopeVal+'" class="form-control" readonly="readonly"/>';
    item += '</div>';
    item += '<div id="inScopeActionDiv'+newInputId+'" class="col-md-3"  style="padding-left: 2px;">';
    item += '<button type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>';
    item += '</div>';    
$('#inScopeDiv').append(item);

在添加之后我想在上面的remButton类上绑定一个click事件，如下所示＆gt;＆gt;

$("#inScopeDiv").delegate(".remButton", "click", function(){
    alert('you clicked me again!');
});
$('#inScopeDiv').on('click', '.remButton', function() {
    alert("working");
})
$('.remButton').live('click', function() {
    alert('live');
})

但没有结果。有人可以帮我这个吗？

Answer 1

将它绑定在非动态但总是在DOM中的父级。

Answer 2

$('.remButton').live('click', function() {
    alert('live');
})

jquery方法live不再有效：

＆＃34;从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。＆＃34;

来源：jquery live

关于事件依恋的一点解释：

你必须意识到你想要添加事件的目标是BEFORE，以便调用add事件函数（在这种情况下使用jQuery的方法）。

另一方面，jquery存在一种方式使工作成为事件附件而不存在元素：

$('html').on('click', '#inScopeDiv .remButton', function () {
  alert('works!');
});

Answer 3

＆lt; p＆gt;每次添加项目时都需要添加侦听器：＆lt; / p＆gt; ＆LT;预＆GT;＆LT;代码＆GT; $（ '＃inScopeDiv'）附加（项目） .off（）//取消绑定旧的侦听器，因此没有重复的侦听器 .on（'click'，'。restButton'，function（）{ 警报（ “工作”）; }）; ＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 4

您可以使用.appendTo将附加的div存储在变量中，然后您可以将click事件直接附加到变量。看到它有效：JSFiddle

$(".appendDiv").click(function () {
      var item = "<div>I'm a new div!</div>";
      var appended_div = $(item).appendTo(".container");
      appended_div.click(function () {
              alert("Working!");
      });
});

附加元素后，事件单击不会对jquery中的附加元素起作用

4 个答案: