Un bref aperçu de l'événement de liaison jQuery on() et du pop-up window_jquery

Il y a souvent des fenêtres pop-up sur la page. Certaines fenêtres pop-up sont générées dynamiquement, et certaines fenêtres pop-up sont masquées en bas de la page. Pour les fenêtres pop-up générées dynamiquement, si vous le souhaitez. surveillez les événements de la fenêtre contextuelle, vous pouvez utiliser la méthode de liaison d'événement jQuery on() qui est implémentée.

Comme le montre l'image, la fenêtre contextuelle est générée dynamiquement par js. Elle apparaît en cliquant sur un lien. Après avoir cliqué sur le lien « Utiliser maintenant » dans la fenêtre contextuelle, l'effet est de fermer la fenêtre contextuelle. -vers le haut de la fenêtre et passez au point d'ancrage.

Ce tag est :

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

Nous devons surveiller l'événement click dans la fenêtre pop-up, mais la fenêtre pop-up elle-même est générée dynamiquement, nous devons donc surveiller le corps et le lier via l'événement on() lors de la pop-up. la fenêtre est générée dynamiquement, la méthode de clic peut être surveillée :

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

Il s'agit en fait d'une liaison d'événement avec deux balises a. Lorsque le lien est une certaine URL, le comportement par défaut est bloqué et la méthode de fermeture de la fenêtre contextuelle est appelée pour accéder au lien, qui est le point d'ancrage. .

Ce qui suit présentera la méthode jQuery on() pour lier l'événement de clic des éléments dynamiques

J'ai déjà été troublé par ce problème. La méthode on a été ajoutée après la version jQuery 1.7. J'ai déjà appris que sa supériorité était supérieure à live(), bind(), délégué() et d'autres méthodes. Dans le projet, je voulais utiliser cela pour tester les résultats. J'ai découvert que les balises générées dynamiquement ne répondaient pas lorsqu'on cliquait, mais la méthode en direct pouvait le prendre en charge. J'ai donc cherché des informations partout et j'ai demandé aux internautes après une longue recherche. temps, j'ai finalement trouvé la réponse dans un article. . .

Lorsque jQuery utilise on pour lier des éléments générés dynamiquement, vous ne pouvez pas opérer directement avec l'objet, vous devez plutôt sélectionner son nœud parent non généré dynamiquement, puis le retrouver pour obtenir l'effet. Tout le monde le saura rien qu’en regardant le code source. L'élément de base du bouton généré sur la méthode n'est pas valide lorsque vous cliquez dessus et la méthode en direct est valide.

Par exemple, il y a deux éléments en dessous de la page :

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

En utilisant le code jQuery ci-dessous, vous pouvez comparer et voir la différence :

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

Le code est simple, je n'inclurai donc pas de page de démonstration. Si vous ne comprenez rien, laissez-moi un message et l'éditeur vous répondra à temps !