A brief overview of jQuery binding events on () and pop-up windows.

A brief overview of jQuery binding events on () and pop-up windows.

There are usually pop-up windows on the page. Some pop-up windows are dynamically generated, and some are hidden at the bottom of the page. For dynamically generated pop-up windows, if you want to listen to the pop-up events, you can use jQuery's event binding on () method.

The pop-up window is dynamically generated by js. It is displayed by clicking a link. After clicking the "use now" link in the pop-up window, the effect is to close the pop-up window and jump to the anchor.

The a label is:

<Astyle = "display: "title =" use now "target =" _ blank "gid =" 167 "href =" http://act.vip.xunlei.com/vip/2016/51dps/#gamelist "class =" co_vip tdu "> use now </a>

We want to listen to the click event in the pop-up window, but the pop-up window itself is dynamically generated, so we need to listen to the body and bind it through the on () event. When this pop-up window is dynamically generated, you can listen to the click method:

function jump_to_anchor() {$("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) {link = $(this).attr('href');if (link == 'http://act.vip.xunlei.com/vip/2016/51dps/#gamelist') {e.preventDefault();msgExit();window.location.href = link;}});}

In fact, two events bound to the tag are bound here. When the link is a url, the default behavior is blocked, and the pop-up window closing method is called to jump to the link, that is, the anchor.

The following describes click events for binding dynamic elements using the jQuery on () method.

I have been troubled by this problem before. I have added the on method after jQuery1.7. I have learned before that it is superior to live (), bind (), delegate () and other methods, in the previous project, I tried to use this to test the results and found that the dynamically generated tag did not respond, but the live method was supported. As a result, I checked the information and asked the netizens, after searching for a long time, I finally found the answer in an article...

When jQuery uses on to bind a dynamically generated element, it cannot directly use this object. Instead, it selects its non-dynamically generated parent node and finds itself to achieve the effect. You can see the source code. The generated button base item on method click invalid live method is valid.

For example, there are two elements on the page:

<Input type = "button" name = "addbtn" value = "button Add"/> <div id = "test"> </div>

You can compare the following jQuery code to see the difference:

$ (Function () {var a = 1, $ _ div = $ ('# test'); $ ('input [name = addbtn]'). on ('click', function () {$ _ div. append ('<input type = "button" name = "test' + a +'" value = "button '+ a +'"/> '); a ++;}); // even number of clicks event $ _ div. on ('click', 'input [name ^ = test]: even', function () {alert ('am a valid on method, can you see me: '+ this. value) ;}); // The Click Event bound to an odd number of items finds that the click is invalid. Instead, the live method supports $ ('input [name ^ = test]: odd '). on ('click', function () {alert ('I am an invalid on method, you cannot see Me ');}); // click events bound to an odd number of items are found to be invalid. Instead, the live method supports $ ('input [name ^ = test]: odd '). live ('click', function () {alert ('I am a live method, can you see me?' + this. value );});});

The code is simple, so I will not go to the demo page. If you have any questions, please leave a message for me. The editor will reply to you in time!