A brief overview of jQuery binding event on() and pop-up window_jquery

There are often pop-up windows on the page. Some pop-up windows are dynamically generated, and some pop-up windows are hidden at the bottom of the page. For dynamically generated pop-up windows, if you want to monitor the pop-up window events, you can use jQuery Event binding on() method is implemented.

As shown in the picture, the pop-up window is dynamically generated by js. It pops up 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 point.

This a tag is:

<astyle="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.xunlei.com/vip/2016/51dps/#gamelist" class="co_vip tdu ">立即去使用</a>

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

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;
}
});
}

This is actually an event binding with two a tags. When the link is a certain URL, the default behavior is blocked, and the pop-up window closing method is called to jump to the link, which is the anchor point. .

The following will introduce the jQuery on() method to bind the click event of dynamic elements

I have been troubled by this problem before. The on method was added after jQuery 1.7 version. I have learned before that its superiority is higher than live(), bind(), delegate() and other methods. Before that, In the project, I wanted to use this to test the results. I found that the dynamically generated tags did not respond when clicked, but the live method could support it. So I searched everywhere for information and asked netizens. After searching for a long time, I finally found the answer in an article. . .

When jQuery uses on to bind dynamically generated elements, you cannot directly operate with the object. Instead, you must select its non-dynamically generated parent node and then find itself to achieve the effect. Everyone will know just by looking at the source code. The generated button base item on method is invalid when clicked and the live method is valid.

For example, there are two elements below on the page:

<input type="button" name="addbtn" value="按钮添加" />
<div id="test"></div>

Using the jQuery code below you can compare and see the difference:

$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
a++;
});
//偶数项点击事件
$_div.on('click', 'input[name^=test]:even', function () { 
alert('我是有效的on方法,你能看见我吗：' + this.value);
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').on('click', function () { 
alert('我是无效的on方法,你不能看见我');
});
//奇数项绑定的点击事件 发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').live('click', function () {
alert('我是live方法,你能看见我吗：' + this.value);
});
});

The code is simple, so I won’t include a demo page. If you don’t understand anything, please leave me a message and the editor will reply to you in time!