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

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元素的click事件处理程序不起作用。 如何运行此事件处理程序？

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");

}）;