On the causes of the failure of dynamically generating DOM binding events and the solutions _jquery

Prior to doing the project is directly using jquery bind the event, but at that time is not dynamically generated DOM elements, but is already in the page of the existing DOM elements for event binding, recently tested to dynamically generated DOM binding events found the event failure, and then tested:

1. Reasons for the failure of the event:

(1) Bind event bindings are valid only for elements that are present in the DOM, and are not monitored for the elements that we later dynamically add, so we cannot bind

(2) Similarly, when you use the var AA = document.getElementsByTagName ("Dynamically generated element") to get the dynamically generated element, it is also not available because the Web page performs only one initialization binding. The dynamically generated DOM elements are then not monitored.

2. Solutions:

(1) One more event in each dynamically generated place, such as the example in this blog

(2) Use Bind to live because live is monitored in real time and is also effective for new DOM elements (because of the constant binding and judgment that can affect Web performance issues)

(3) Use bind instead of delegate because delegate is monitored in real time.

(4) The Bind (), Live (), and Delegate () methods are substituted on the jquery1.7 version with on.

3. The reason for the recent failure of the event: in the original Web page (code visible HTTPS://GITHUB.COM/UFOWL/IFE/TREE/MASTER/STAGE02/TASK16), I want to get the dynamically generated Delete button in the table, to help delete the button binding delete time, but the deletion of the event is invalid, because the Delete button is dynamically generated, initialization event binding, get to the table inside the button is empty, so the binding is always empty elements, So when you click the button, there is no response.

4. The Final Solution: get the table first and then bind the click event of the table (because the table is the DOM element that already exists), Then capture the target of the event when the Click event is triggered (for example, click the button in the table, this time because the button has been dynamically generated and append into the table, so the button is there, At this point, target refers to a button, and then the appropriate action is made.

Note: Here are two questions to note:

(1) The elements inside the table have been added into the table, so when you click on the button, E.target gets the button.

(2) Why has the button these elements been added into the table, but still did not get it, because it is init () The function initialization to get the button inside the table, but at this time has not done anything, so get is empty, so not binding any elements.

The two issues to be noted above need to be clearly divided, which is the key to the problem.

5. About bind: The event will always be bound after each binding event, unless the unbind is unbound and then the event persists, so that's why when you do the project, sometimes the results of the AJAX request appear to overlap 1,2,4,8, because if you use bind , each trigger event is bound to an operation, so the first time the trigger, the AJAX request once, the second time, the AJAX request 1+1=2, the third is 1+2+1=4, the fourth time is 1+2+4+1=8 time, and so on. So if you are using bind bind events, you will not cause AJAX requests more than once by unbind the original events of the binding element and then tying the event.

The above article about the dynamic generation of DOM binding event failure and the solution is small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.