Invalid jquery click event For dynamically generated content, jquery click event is invalid

Recently, the front end is doing a function,

The content of the function is to click the A button to generate content 1, click the B button in the content 1 to generate the content 2, and click the C button in the content 2 to return to the original interface style.

The entire jquery code uses the .click(function(){} layered nested structure. There is still no problem with dynamic content generation under the support of this click() click event.

However, there will be a problem with the “.click(function(){} layered nested structure”, that is, the last step, after returning to the original interface, click the A button again, it will not work.

Finally, the jQuery on() method was used to solve it.

Event handlers added using the on() method apply to current and future elements (such as new elements created by scripts). That is to say, if the element is dynamically created by jquery, rather than written in the page code, it is better to use on() for event processing, rather than simply use click(), even if it works normally, It is also easy to cause program hidden dangers after the end of the operation.

The difference between on() and click():

There is no difference between the two when binding static controls, but if faced with dynamically generated controls, only on() can successfully bind to dynamic controls.

Even if the element is not dynamically generated by jquery, it is still possible for us to use on() to process the element. Therefore, we should be more familiar and proficient in using on() to process events on the element.

A few useful related information:

.click() and on(‘click’, function())

https://ift.tt/q36FPby

jquery click event failure reasons and solutions

https://ift.tt/KXIPeWY

jQuery on() method (note content also works)

https://ift.tt/Y9VNDlp

The post jquery click event not working For dynamically generated content, jquery click event not working issue first appeared on Lenix Blog .

This article is reprinted from https://blog.p2hp.com/archives/9073
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment