Solve the problem of the jquery Ajax dynamic new node not triggering the Click event

When writing Ajax loading data, we found that after adding the demo node element, we lost the previous click Event. Why does the Click event expire and how do we solve it?

In fact, the simplest way is to write onclick= "" directly in the label, but this is actually a bit low, the best way is to bind a click event to the class Name.

Two solutions to solve the problem of the jquery Ajax dynamic new node can not be triggered, in order to achieve better results, assume that the body of a page has the following structure of Code:

1 <ulID= "demo">2  <Liclass= "demo1">A1</Li>3  <Liclass= "demo1">A2</Li>4  <Liclass= "demo1">A3</Li>5 </ul>6  7 <Scripttype= "text/javascript">8 $("#demo"). Click (function(){9  $("#demo"). Append ('<li class= "demo1" >aaa4</li>'); //dynamic like the end of UL append a new elementTen }); one </Script>

Method One: Use Live:

live()The function binds the selected element to the previous or multiple event handlers, and specifies the function to run when these events Occur. The live() function is applied to the current and future elements of the matching Selector. For example, elements created dynamically through a script.

The implementation is as Follows:

$ ('. demo1 '). Live (' Click ', function () {alert (' OK ');});

Method Two: Use On:

An event can be bound on to its parent or body by means of a method, implemented as Follows:

$ ("#demo"). on (' click ', '. demol ', function () {alert (' OK ')});

The two methods above can solve the problem that the jquery Ajax dynamic new node cannot trigger the click Event. Know the way, try it quickly.

Source: http://www.shuchengxian.com/Article/info/id/228.html

Solve the problem of the jquery Ajax dynamic new node not triggering the Click event