Two methods to solve the problem that the newly added element node in jquery cannot trigger an event: jquery Node

Two methods to solve the problem that the newly added element node in jquery cannot trigger an event: jquery Node

For example, when ajax is used to read the message list, each message is followed by a reply button. The class is "reply". If you use $ (". reply "). click (function () {// do something ...}), you must click the reply button in the list loaded by ajax. clicking the event will fail.

ActuallyThe simplest methodIt is to write onclick = "" directly in the tag, but this writing is actually a bit low. The best way is to bind a click event to the class name.

There are two solutions to the problem that the newly added element node in jquery cannot trigger events., As follows:

For better demonstration, assume that the following structure code is available under the body of a page:

<P id = "pLabel"> Add a new entry </p> <ul id = "ulLabel"> <li class = "liLabel"> aaa1 </li> <li class =" liLabel "> aaa2 </li> <li class =" liLabel "> aaa3 </li> </ul> <script type =" text/javascript ">$ (" # pLabel "). click (function () {$ ("# ulLabel "). append ('<li class = "liLabel"> aaaQ </li>'); // append a new element to the end of the dynamic image ul}); </script>

Method 1: use live

The live () function binds one or more event handlers to the selected elements and specifies the function to run when these events occur. The live () function is used to match the current and future elements of a selector. For example, elements dynamically created using scripts.

The implementation is as follows:

$('.liLabel').live('click', function(){ alert('OK');});

Method 2: Use on

You can bind an event to its parent or body through the on method. The implementation is as follows:

$ ("# UlLabel "). on ('click ','. liLabel ', function () {alert (' OK ')}); or: $ ("body "). on ('click ','. liLabel ', function () {alert (' OK ')});

Now you can try to see if the problem has been solved. I hope this article will help you.