In the past, I used jquery's bind to events directly. However, at that time, I did not generate dom elements dynamically, but the dom elements that originally existed on the page for event binding. Recently, when I tested the dynamically generated dom binding event, I found that the event was invalid, so I tested it:
1. Causes of the event's failure:
(1) The binding event binding is only valid for elements present in the dom. It cannot be monitored for elements that we dynamically add later, so it cannot be bound.
(2) Similarly, when you use var aa = document.getElementsByTagName("dynamic generated element"); to obtain dynamically generated elements, because the web page will only perform initialization binding once, and the dynamically generated dom elements cannot be monitored after that.
2. Solution:
(1) Bind more events in each dynamically generated place, such as the example in this blog
(2) Change bind to live, because live is monitored in real time and is also effective for newly added dom elements (because it is constantly binding and judgment, it may affect web performance problems)
(3) Change bind to delegate, because delegate is monitored in real time.
(4) In jquery1.7, the bind(), live() and delegate() methods were replaced by on.
3. Regarding the reasons for the recent event failure: In the original web page (the code can be seen at https://github.com/UFOwl/ife/tree/master/stage02/task16), I want to get the delete button dynamically generated in the table to help delete the delete button bind the delete time, but the delete event is invalid because the delete button is dynamically generated. When initializing the event binding, the button in the obtained table is already empty, so the bound elements are always empty, so there is no response when clicking the button button.
4. The final solution: first get the table, then bind the table's click event (because the table is in the dom element that already exists), and then capture the event's target (for example, click the button in the table. At this time, because the button has been dynamically generated and append it into the table, the button exists. At this time, the target refers to the button), and then perform the corresponding operation.
Note: Two issues are noted here:
(1) The elements in the table have been added to the table, so when clicking that button, the button you get is the one you want.target
(2) Why have the buttons been added into the table, but it still cannot be obtained? Because the buttons in the table are obtained when the init() function is initialized, but no operation has been performed at this time, so what is obtained is empty, so no elements are bound.
The two issues that need to be paid attention to above must be clearly distinguished, and this is the key to the problem.
5. About bind: After each binding event, the event will be bound. Unbind and then rebind, otherwise the event will always exist. So this is why when working on a project, sometimes the result of ajax request will be superimposed like 1, 2, 4, 8. Because if bind is used, each triggering event will be bound to an operation. Therefore, when the first time is triggered, ajax request will be requested once; when the second time is triggered, ajax request will be 1+1=2 times; the third time is 1+2+1=4 times; the fourth time is 1+2+4+1=8 times, and so on. Therefore, if you use bind to bind events, you must first unbind the original events of the element and then bind to events, so that ajax requests will not cause multiple times.
The above article about the reasons and solutions for the failure of the dynamic generation of dom binding incident is all the content shared by the editor. I hope it can give you a reference and I hope you can support Wulin.com more.