jquery new Element Event binding problem __javascript

JS event monitoring and CSS is not the same, CSS as long as set the style, whether the original or new additions, have the same performance. Instead of the event listener, you must bind each element individually to the event.

A common example is when a table is processed. There is a delete button at the end of each line, and this is the ability to delete the line. < table >
< tbody >
< tr >
< td > This line originally has </td >
< td >< Button class = "del" > Delete </button ></td >
</TR >
< tr >
< td > This line originally has </td >
< td >< Button class = "del" > Delete </button ></td >
</TR >
</tbody >
</table >

Normally, I would be so binding jQuery(function ($) {//delete button initialization binding Delete event $ (". Del"). Click (function () {$ (this). Parents ("tr")    . remove (); }); });

Everything is perfect for the delete button that existed before Domready. But if you add a few lines with JS after Domready, the buttons in the new lines will lose any effect.

How to solve this problem. The following 4 solutions are available:
=============================
No. 0 Solution--onclick
If you disregard the principles of separation of structure and behavior, I would normally do so.
Note that , at this time the DELTR function must be global functions, you have to put jquery (function ($) {}) outside, put inside the local function, the HTML in the onclick can not be called. <td><buttononclick= "deltr (This)" > Delete </button></td> jQuery (function ($) {   //add row     $ ("#add2"). Click (function () {        $ ("#table2 >tbody"). Append (' <tr><td > New Line </td><td><button nclick= "deltr (This)" > Delete </button></td></tr> ')    }); }); To delete a function of a row, you must put the Domready function outside function deltr (DELBTN) {    $ (delbtn). Parents ("tr"). Remove ();};

=============================
Number 1th Solution--Repeated binding method
That is, to bind an event handler function to an existing element when Domready.
And then bind again when the new element is added.    <td><buttonclass= "del" > Delete </button></td> jQuery (function ($) {//Define Delete button event bindings//write inside to prevent pollution global namespaces    function Deltr () {$ (this). Parents ("tr"). Remove ();    };    An existing Delete button initializes the binding deletion event $ ("#table3. Del"). Click (deltr); Add row $ ("#add3"). Click (function () {$ (' <tr><td> new row </td><td><button class= "del" > Delete             </button></td></tr> '//here to the Delete button to bind the event again. Find (". del"). Click (deltr). End ()    . Appendto ($ ("#table3 >tbody")); }); });

=============================
Number 2nd Solution-Event Bubbling method
Using the principle of event bubbling, we bind the ancestor element of this button to the event handler function.
And then by event.target this object to determine whether this event is triggered by the object we are looking for.
You can usually use some DOM attributes, such as Event.target.className, event.target.tagName, etc. to judge. <td><buttonclass= "del" > Delete </button></td> jQuery (function ($) {//Fourth table Delete button event binding $ ("#table4")        . Click (function (e) {if (e.target.classname== "Del") {$ (e.target). Parents ("tr"). Remove ();    };    }); Fourth table Add button event binding $ ("#add4"). Click (function () {$ ("#table4 >tbody"). Append (' <tr><td> New line </td> <td><button class= "del" > Delete </button></td></tr>)}); }); Number 3rd Solution--Copy event method
The above schemes can be said that even if you do not use the jquery library, you can also relatively easy to implement. But this scheme is more dependent on jquery. and must require jquery version 1.2 above. Low-version jquery requires plug-ins.
The above two programs are to delete the function of a lot of brain, changed a variety of triggers, binding the way. This scheme is different and can be bound in the same way as the normal static elements in Domready. But when we add a new line we change it, and we don't want to add a new line by stitching the string like the above. This time we tried to copy the DOM elements in a way. and copy it together with the bound event, copy it, and then use Find to modify the internal elements.
And, like this example, if you're going to remove all the elements from the light, that template template is necessary, and if you don't erase it, you don't need to use template. In order to prevent being mistakenly deleted, here I set the template hidden.
I used the unique clone (true) in jquery. Template{display:none} <trclass= "template" >            <td> here is template </td>            <td><button class= "Del" > Delete </button></td>        </tr>        <tr>     & nbsp      <td> This line originally had </td>            <td><button  class= "del" > Delete </button></td>        </tr>       &NBSP;&LT;TR >            <td> This line originally had </td>            <td& gt;<button class= "del" > Delete </button></td>        </tr> JQuery ( Function ($) {   //the Delete button event binding     $ ("#table5. del") for table fifth. Click (function ()  {        $ (this). Parents ("tr"