Ein kurzer Überblick über das jQuery-Bindungsereignis on() und das Popup-Fenster window_jquery

Es gibt oft Popup-Fenster auf der Seite. Einige Popup-Fenster werden dynamisch generiert und einige Popup-Fenster werden am unteren Rand der Seite ausgeblendet, wenn Sie möchten Um die Ereignisse des Popup-Fensters zu überwachen, können Sie die jQuery-Ereignisbindung mithilfe der on()-Methode implementieren.

Wie im Bild gezeigt, wird das Popup-Fenster dynamisch von js generiert. Es öffnet sich, indem Sie auf den Link „Jetzt verwenden“ im Popup-Fenster klicken Öffnen Sie das Fenster und springen Sie zum Ankerpunkt.

Das ist ein Tag:

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

Wir müssen das Klickereignis im Popup-Fenster überwachen, aber das Popup-Fenster selbst wird dynamisch generiert, daher müssen wir den Text überwachen und ihn über das Ereignis on() binden, wenn das Popup erscheint Das Fenster wird dynamisch generiert, die Klickmethode kann überwacht werden:

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

Dies ist eigentlich eine Ereignisbindung mit zwei a-Tags. Wenn der Link eine bestimmte URL ist, wird das Standardverhalten blockiert und die Methode zum Schließen des Popup-Fensters aufgerufen, um zum Link zu springen, der den Ankerpunkt darstellt. .

Im Folgenden wird die jQuery on()-Methode vorgestellt, um das Klickereignis dynamischer Elemente zu binden

Dieses Problem hat mich schon früher gestört. Die on-Methode wurde nach der jQuery-Version 1.7 hinzugefügt. Ich habe zuvor erfahren, dass ihre Überlegenheit höher ist als die von live(), bind() und anderen Methoden. Im Projekt wollte ich dies verwenden, um die Ergebnisse zu testen. Ich stellte fest, dass die dynamisch generierten Tags beim Klicken nicht reagierten, aber die Live-Methode konnte dies unterstützen. Also habe ich nach langer Suche überall nach Informationen gesucht Zeit fand ich endlich die Antwort in einem Artikel. . .

Wenn jQuery on zum Binden dynamisch generierter Elemente verwendet, können Sie nicht direkt mit dem Objekt arbeiten. Stattdessen müssen Sie seinen nicht dynamisch generierten übergeordneten Knoten auswählen und sich dann selbst finden, um den Effekt zu erzielen. Jeder wird es wissen, wenn er sich nur den Quellcode ansieht. Das generierte Schaltflächen-Basiselement für die Methode ist ungültig, wenn darauf geklickt wird, und die Live-Methode ist gültig.

Zum Beispiel gibt es unten auf der Seite zwei Elemente:

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

Mit dem folgenden jQuery-Code können Sie vergleichen und den Unterschied erkennen:

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

Der Code ist einfach, daher werde ich keine Demoseite einbinden. Wenn Sie etwas nicht verstehen, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten!