jQuery .on() 函数在 DOM 个创建的元素上出现问题

Question

在我的 Web 应用程序中，我使用 jQuery 中的 .on() 将点击事件绑定到由 AJAX 调用创建的动态多级菜单中的特定 li 元素，并且传递给 DOM.

$(".dl-menu li:not(:has(li)):not(.dl-back)").on("click", function(){
  // My Code...
});

很明显我把这段代码放在所有依赖项后面（jQuery 在这种情况下），但是我没有工作，代码没有被执行。

仅当我打开 Firebug 并将代码粘贴到其中时才有效。

我也试过这个：

$(document).ready(function() {
  $(".dl-menu li:not(:has(li)):not(.dl-back)").on("click", function(){
    // My Code...
  });
});

但是也不行。

我做错了什么？

编辑：要添加更多详细信息：

HTML结构：

  <div id='tab2' class='col s12'>
    <div class='section no-pad-bot' id='index-banner'>
      <br><br>
      <h2 class='header center green-text'>MENU</h2>
      <div id='prodcontainer'>
        <div id='dl-menu' class='dl-menuwrapper'></div>
      </div>
    </div>
  </div>

AJAX:(重要部分-里面的代码success

$(".dl-menuwrapper").html("<button class='dl-trigger' style='visibility:hidden;'></button>"+json.html.replace('dl-submenu', 'dl-menu dl-menuopen'));
$('#dl-menu').dlmenu();

json.html 包含要添加到 DOM 的带有 HTML 的字符串。像这样：

json.html='<ul class="dl-submenu"><li data-id="17"><a href="#" class="catlink">A</a><ul class="dl-submenu"><li data-id="18"><a href="#" class="catlink">B</a><ul class="dl-submenu"><li data-id="20"><a href="#" class="catlink">C</a></li><li data-id="21"><a href="#" class="catlink">D</a></li></ul></li><li data-id="19"><a href="#" class="catlink">E</a></li></ul></li></ul>'

Answer 1

以这种方式使用 .on() 只会绑定当前位于 DOM 中的元素。因为你是通过AJAX载入菜单，执行这段代码时是不可用的。

最好的解决方法是 select 包装器并指定 select 或：

$(".dl-menu").on("click", "li:not(:has(li)):not(.dl-back)", function(){

});

提供 .dl-menu 存在于 HTML 中，您不会在加载文档后创建它。

编辑 - 备选方案

在加载菜单后放置设置事件侦听器的代码。

Answer 2

您应该对已经存在的元素使用 .on('click'....)。所以你需要使用如下代码：

$(document).ready(function() {
  $(".dl-menuwrapper").on("click", ".dl-menu li:not(:has(li)):not(.dl-back)", function(){
    // My Code...
  });
});

或者，

$(document).on("click", ".dl-menu li:not(:has(li)):not(.dl-back)", function(){
    // My Code...
});

jQuery .on() 函数在 DOM 个创建的元素上出现问题

Issue with jQuery .on() function on DOM created elements

javascript

jquery

dom

jquery-on

jquery-events

编辑：要添加更多详细信息：

编辑 - 备选方案