Causes and Solutions of Failure in Dynamically Generating dom Binding Events

  • 2021-07-09 06:43:39
  • OfStack

Before doing projects, bind of jquery was directly used to bind events, but at that time, dom elements were not dynamically generated, but dom elements originally existing in the page were bound to events. Recently, when testing the dynamically generated dom binding events, it was found that the events failed, so I tested 1:

1. Causes of event failure:

(1) bind event binding is only valid for the elements existing in dom, but it can't be monitored for the elements that we dynamically added later, so it can't be bound

(2) Again, when you use var aa = document. getElementsByTagName ("dynamically generated elements"); To get dynamically generated elements, because the web page will only perform initialization binding once, and then dynamically generated dom elements will not be monitored.

2. Solutions:

(1) Bind one more event in every dynamically generated place, such as the example in this blog

(2) Change bind to live, because live is monitored in real time, and it is also effective for new dom elements (because of continuous binding and judgment, it may affect the performance of Web)

(3) Change bind to delegate, because delegate is monitored in real time.

(4) bind (), live () and delegate () methods were replaced by on in jquery 1.7 onwards.

3. Reasons for the failure of recent events: In the original webpage (the code can be found in https://github.com/UFOwl/ife/tree/master/stage02/task16), I want to get the dynamically generated delete button in table, and help 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 1 is an empty element, so when clicking the button button, 1 does not respond.

4. The final solution: first get table, then bind click event of table (because table is in the existing dom element), and then capture target of the event when clicking the event trigger (for example, click button in table, at this time, button exists because button has been dynamically generated and append has entered table, at this time target refers to button), and then

Note: Pay attention to two problems here:

(1) The elements in table have been added to table, so when you click on button, e. target will get button

(2) Why have these elements of button been added into table, but they still can't be obtained? Because init () was initialized to obtain button in table, but no operation has been carried out at this time, so what was obtained is empty, so no elements are bound.

The two problems that need attention above should be clearly distinguished, which is the key to the problem.

5. With regard to bind: After each binding event, the event will be bound directly, unless it is unbound with unbind and then re-bound, otherwise the event will exist directly, so this is why when doing projects, sometimes the results of ajax requests will be superimposed like 1, 2, 4 and 8, because if bind is used, each trigger event will be bound once, so when the first trigger is triggered, ajax requests once; For the second time, ajax requests 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 bind is used to bind events, unbind should first unbind the original events of the element and then bind the events, so as not to cause ajax requests multiple times.


Related articles: