jquery - 动态添加事件

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 标记被填充时，点击事件不会触发。我认为是因为 class into anchor 是动态的。

如何在append函数后添加点击事件？

Answer 1

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

作为您的 <ul>元素正在动态附加，您必须使用 $(document) 委托(delegate)事件任何其他静态父元素。

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

Demo Fiddle