Question

在我的Web应用程序中，我使用jQuery中的.on()将click事件绑定到由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加载菜单，所以在执行此代码时它不可用。

最佳解决方法是选择包装器并指定选择器：

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

});

在加载文档后，您未创建的HTML中存在.dl-menu。

编辑 - 替代

在加载菜单后，将代码设置为事件监听器。

Answer 2

您应该对已经存在的元素使用1。因此，您需要使用以下代码：

.on('click'....)

或者，

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

DOM创建的元素

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

2 个答案:

编辑 - 替代