Question

我在js文件中有以下代码：

    $(".dropmenu").on("click", function(event){
      event.preventDefault();
      $(this).parent().find("ul").slideToggle();
    });

我的网页上有以下代码：

var append="<ul>";

$.each(items, function(i, v){
  append += "<li><a class='dropmenu' href='#'> Option </a>" +
              "<ul>" +
                 "<li><a href='somelink'>somelink</a></li>" +
              "</ul></li>";

}

$("div").append(append);

关键是当我的ul标签填满时，点击事件不会触发。我认为因为班级成为锚是动态的。

如何在追加功能后添加点击事件？

Answer 1

使用此.on()用于委派。使用.delegate()是另一种选择。

当动态附加<ul>元素时，您必须使用任何其他静态父元素的$(document)委派事件。

$(document).on('click','.dropmenu', function(event){
  event.preventDefault();
  $(this).parent().find("ul").slideToggle();
});

<强> Demo Fiddle

Answer 2

使用event delegation将事件附加到动态添加的DOM。

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

 $("body").on('click','.dropmenu', function(event){
  event.preventDefault();
  $(this).parent().find("ul").slideToggle();
});

Answer 3

你把你的代码放在$(document).ready我把它放进去并且工作正常 DEMO

动态添加事件

3 个答案: