如何运行元素的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");
});

I want to load #menu-left-left element using jQuery. When this code block works the menu seems to look like I want. But .test element's click event handler doesn't work. How can I run this event handler?

Answer 1

You don't need to delegate the events as you are selecting the element after adding it in. Your problem is that the body of your loop isn't valid.

var temp = "";

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

There is a syntax error in your string concatenation. You probably meant either:

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

or

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

Here's a working version of your code:

 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

You should use delegated events as the element you're targetting is added dynamically. Try this :

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

});