Question

在加载页面时，我正在使用以下方法在Jquery中创建水平制表符：

function createhorizontaltab(categories) {
    var categoryArr = JSON.parse(categories);
    var htmlbuild = $('<ul>');
    for (var i = 0; i < categoryArr.categories.length; i++) {
          var name = categoryArr.categories[i].name;
          htmlbuild.append('<li id= "'+name+'" class="active">'+name+'</a></li>');
     }
       htmlbuild.append('</ul>');
       $("#menuInner").append(htmlbuild);
}

我的HTML代码：

 <body>
    <section class="menuWrap">
        <div id = "menuInner" class="menuInner"> 
        </div>
    </section>
 </body>

我正在尝试使用这种方式选择li的点击事件进行注册，但这并没有开始。

我需要将其保留在 Jquery ready（）函数之外：

 $(document).ready(function () {
     createhorizontaltab(categories)
}

$("#menuInner li ").click(function(){
}

有人可以帮我吗？

Answer 1

使用此，

$(document).on( "click", "#menuInner li", function() {
  //
});

on() - 事件委派

或者

$(document).delegate( "#menuInner li", "click", function() {
 //
});

delegate() - 为选择器中指定的元素的一个或多个事件附加处理程序，现在或将来。

您正在动态添加元素。

Answer 2

您正在尝试在页面加载时添加事件处理程序，但当时页面上不存在li。

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用
时页面上必须存在

因此，您必须使用事件委派

将事件分派到其目标EventTarget和任何事件听众发现有触发。然后将触发冒泡事件跟随EventTarget找到的任何其他事件监听器父链向上，检查注册的任何事件监听器每个连续的EventTarget。这种向上传播将继续向上包括文件。

$(document).on( "click", "#menuInner li", function() {
  // your code
});

事件不会在动态li元素上触发

2 个答案: