Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail "how to dynamically add elements and click events in Jquery" with detailed content, clear steps and proper handling of details. I hope that this article "how to dynamically add elements and click events in Jquery" can help you solve your doubts.

To add js events to dynamically added elements, you cannot add js events directly. You need to use the on () method to add event handlers to the child elements specified by the selector, not the selector itself.

1. Grammar

$(selector) .on (event,childSelector,data,function) / / event _ js events to be added / / childSelector _ can only be added to event handlers on specified child elements / / data _ arguments that need to be passed when calling a function / / events triggered when the function _ js function occurs

two。 Example

/ / html code / / dynamically append a $("# div1") .html ('link click') to the element where id is div_link; / / trigger the hyperlink a $("# div1") dynamically added through js. On ("click", "# div_link", function () {/ / Click the handler function called when id is div_link)

3. Related concepts: event bubbling, event capture. Event bubbling is the default.

Event bubbling: triggers the execution of the event from the child element to the ancestor element; the child element is bound to the click event. When clicking on the child element, the browser will look up the parent and ancestor element bound with the click event, and execute it if there is any. The default is event bubbling.

Event capture: from the clicked element to the same event triggered by the child element; when the click event is bound in an element, click on this element, and the browser will look down for the child and descendant elements bound with the click event, and execute the click event if any

Code:

/ / the first parameter: the event bound; / / the second parameter: the method executed after the event is triggered; / / the third parameter: determines whether the event bubbles-false or event capture-true; defaults to false- event bubbles; elem.addEventListener ("click", function () {. }, boolean); reading here, this article "how to dynamically add elements and click events in Jquery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.