Gambaran keseluruhan ringkas acara pengikatan jQuery on() dan window_jquery pop timbul

Selalunya terdapat tetingkap timbul pada halaman Beberapa tetingkap timbul dijana secara dinamik, dan beberapa tetingkap timbul disembunyikan di bahagian bawah halaman Untuk tetingkap timbul yang dijana secara dinamik, jika anda mahu memantau peristiwa tetingkap pop timbul, anda boleh menggunakan kaedah jQuery Event binding on() dilaksanakan.

Seperti yang ditunjukkan dalam gambar, tetingkap pop timbul dijana secara dinamik oleh js Ia muncul dengan mengklik pautan Selepas mengklik pautan "Gunakan Sekarang" dalam tetingkap timbul, kesannya ialah menutup pop timbul -atas tingkap dan lompat ke titik sauh.

Teg ini ialah:

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

Kita perlu memantau acara klik dalam tetingkap timbul, tetapi tetingkap timbul itu sendiri dijana secara dinamik, jadi kita perlu memantau badan dan mengikatnya melalui acara on() Apabila timbul tetingkap dijana secara dinamik, kaedah klik boleh dipantau :

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

Ini sebenarnya adalah peristiwa yang mengikat dengan dua teg a Apabila pautan ialah URL tertentu, gelagat lalai disekat dan kaedah penutupan tetingkap timbul dipanggil untuk melompat ke pautan, iaitu titik utama. .

Yang berikut akan memperkenalkan kaedah jQuery on() untuk mengikat acara klik elemen dinamik

Saya telah bermasalah dengan masalah ini sebelum ini Kaedah on telah ditambah selepas versi jQuery 1.7 yang saya telah belajar sebelum ini bahawa kelebihannya adalah lebih tinggi daripada kaedah live(), bind(), delegate() dan lain-lain. Dalam projek itu, saya ingin menggunakan ini untuk menguji keputusan saya mendapati bahawa tag yang dihasilkan secara dinamik tidak bertindak balas apabila diklik, tetapi kaedah langsung boleh menyokongnya Jadi saya mencari maklumat di mana-mana dan bertanya kepada netizen masa, saya akhirnya menemui jawapan dalam artikel. . .

Apabila jQuery menggunakan untuk mengikat elemen yang dijana secara dinamik, anda tidak boleh beroperasi secara langsung dengan objek, sebaliknya, anda mesti memilih nod induknya yang tidak dijana secara dinamik dan kemudian mencari dirinya untuk mencapai kesannya. Semua orang akan tahu hanya dengan melihat kod sumber. Item asas butang yang dijana pada kaedah tidak sah apabila diklik dan kaedah langsung adalah sah.

Sebagai contoh, terdapat dua elemen di bawah pada halaman:

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

Menggunakan kod jQuery di bawah, anda boleh membandingkan dan melihat perbezaannya:

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

Kod ini mudah, jadi saya tidak akan memasukkan halaman demo Jika anda tidak faham apa-apa, sila tinggalkan saya mesej dan editor akan membalas anda tepat pada masanya.