Home > Developer > Web Develop
jquery in the. On () method is used to bind an element to an event handler, which I often use in two places:
Can view previously written blogs: binding events for future elements in jquery
Let's look at an example:
Dynamically load page b in a div in page A, and a div in page B binds a click event.
Page A is as follows:
<Body> <inputtype= "button"name=""ID= "BTN1"value= "Load page B with event" /><inputtype= "button"name=""ID= "BTN2"value= "Load any other page" /><DivID= "Content"style= "height:300px;width:80%;"></Div><Scriptsrc= "Http://common.cnblogs.com/script/jquery.js"type= "Text/javascript"></Script><Scripttype= "Text/javascript">$(function () { $('#btn1'). Click (function(){ $('#content'). Load ('b.html'); }) $('#btn2'). Click (function(){ $('#content'). Load ('justforshowsomething.html'); })}) </Script></Body></HTML>
Page B is as follows:
<style>. Box{width:200px;Height:50px;background:Green;}. Added{background:Gray;Color: White; }</style></Head><Body> <Divclass= ' box '></Div> </Body><Scriptsrc= "Http://common.cnblogs.com/script/jquery.js"type= "Text/javascript"></Script><Scripttype= "Text/javascript">$(function() {$ (document). On ('Click','. Added',function() {alert ('clicked');}) $('. Box'). Append ("<div class= ' added ' > I was using the. On method to bind the event node, click I'll have events </div>"); }) </Script></HTML>
Running an instance
Problem found: First load page B, click. added, will alert once; Load page b again, click. added, the alert will be two times, even if the middle load is over another page. That is, page B binds the same click event multiple times.
The effect is the same as the following:
$ (' #btn1 '). Click (function () {alert (1);})
$ (' #btn1 '). Click (function () {alert (2);})
$ (' #btn1 '). Click (function () {alert (3);})
Then, click Btn1, which pops up 1, 2, 3
Even if you don't understand what's going on, you can resolve this by releasing the event before each binding event: $ (document). Off (' click ', '. Added ');
I would have thought that every time I reload page B, because the previous. Added node does not exist, the event that was bound before is not present, and it is strange why the event will remain? The reason is that there is no understanding. On () usage.
Instance:$ (document). On (' click ', '. Added ', f) events are not bound to the. Added element, but are bound to the Document object (so. On () to bind events to future elements). When you click. added, events are triggered because events are bubbling to the document. The $ (document) in page B of load is actually the Document object for page A (if page B is embedded in the IFRAME tag, the $ (document) in page B refers to its own document object), so loading page B multiple times, The event is repeatedly registered for the Document object of page A.
WORKAROUND: Replace the document (document) on (' Click ', '. Added ', f) with a parent node that already exists on your page . This allows you to re-load the page each time, because the previous parent node does not exist, and the previously bound event does not exist.
As modified in page B to:
$ ('. Box '). On (' click ', '. Added ', function () {alert (' clicked ')})Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
