Question

请帮我解决这个问题：当我点击附加内容时，.click和.on都无法正常工作

$(document).ready(function() {
    $( ".cooldiv" ).click(function() {
      alert(1);
    });

    $(".cooldiv").on('click',  function(){
      alert(1);
    });

    $("#fields_count").change(function() {
                var $newDiv = $('<div class="cooldiv">i am cooldiv</div>');
                //$($newDiv).addClass('cooldiv');
                $("#testdivs").append($newDiv);
    });
});

html是：

<div id="testdivs"><div class='cooldiv'>qwdqwdwef</div></div>
<input type="text" size="3" id="fields_count" name="fields_count" value="3">

当我点击包含'qwdqwdwef'的div时，会发出警报，但是当点击相同类的附加div时它不会。有什么想法吗？

Answer 1

尝试使用event-delegation，您可能会问我为什么要在这里使用代表团？答案是在使用类.cooldiv将事件绑定到元素时，它在Dom中不可用。所以事件不会受到约束。因此，我们必须通过事件委托

来传递这种情况

$('#testdivs').on('click','.cooldiv',function(){
 alert(1);
});

Answer 2

您需要使用委托。因为当您添加click事件处理程序时，您的新元素不存在，所以您需要使用委派的事件处理程序。

请改为尝试：

$(document).on('click',  '.cooldiv', function(){
  alert(1);
});

您可能想查看有关 .on()的jQuery文档。

Answer 3

您需要 event delegation.

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

试试这个：

  $("#testdivs").on('click','.cooldiv',  function(){
   alert(1);
  });

jQuery：.click对附加的div不起作用

3 个答案: