如何运行元素的点击事件处理程序？

Question

HTML

<div id="menu-left-left">
    <ul>
    </ul>
</div>

的jQuery

var temp = "";

for (var i = 0; i < 2; i += 2) {
    temp += "<li> <a href='#' class='test'> + "Test" + </a> </li>";
}

$("#menu-left-left ul").html(temp);

$(".test").click(function() {   
    alert("Element test class");
});

我想使用jQuery加载#menu-left-left元素。当这个代码块工作时，菜单似乎看起来像我想要的。但.test元素的点击事件处理程序无法正常工作。我该如何运行此事件处理程序？

Answer 1

在添加之后选择元素时，您无需委派事件。问题是循环体无效。

var temp = "";

for (var i = 0; i < 2; i += 2) {
    temp += "<li> <a href='#' class='test'> + "Test" + </a> </li>";
}

字符串连接中存在语法错误。你可能意味着：

 "<li> <a href='#' class='test'>" + Test + "</a> </li>" // Test is a variable

或

 "<li> <a href='#' class='test'>Test</a> </li>"

这是您的代码的工作版本：

var temp = "";

for(var i=0; i<2; i+=2) {
     temp += "<li> <a href='#' class='test'> Test </a> </li>";
}

$("#menu-left-left ul").html(temp);

$(".test").click(function() {   
    alert("Element test class");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu-left-left">
 <ul>

 </ul>
</div>

Answer 2

您应该使用委派事件作为动态添加目标的元素。试试这个：

$("#menu-left-left ul").on("click","li a.test",function() {   
alert("Element test class");

}）;