jQuery バインディング イベント on() とポップアップ window_jquery の概要

多くの場合、ページ上には動的に生成されるポップアップ ウィンドウがあり、動的に生成されるポップアップ ウィンドウの場合は、必要に応じて一部のポップアップ ウィンドウが非表示になります。ポップアップ ウィンドウのイベントを監視するには、jQuery イベント バインディング on() メソッドが実装されています。

図に示すように、ポップアップ ウィンドウは js によって動的に生成されます。ポップアップ ウィンドウ内の「今すぐ使用」リンクをクリックすると、ポップアップが閉じられます。 - ウィンドウを上に移動し、アンカーポイントにジャンプします。

これはタグです:

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

ポップアップ ウィンドウのクリック イベントを監視する必要がありますが、ポップアップ ウィンドウ自体は動的に生成されるため、本体を監視し、ポップアップ時に on() イベントを通じてバインドする必要があります。ウィンドウは動的に生成され、クリック方法を監視できます:

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

これは実際には 2 つの a タグを持つイベント バインディングで、リンクが特定の URL の場合、デフォルトの動作がブロックされ、アンカー ポイントであるリンクにジャンプするためにポップアップ ウィンドウを閉じるメソッドが呼び出されます。 。

以下では、動的要素のクリック イベントをバインドする jQuery on() メソッドを紹介します

以前この問題に悩まされていましたが、on メソッドは jQuery 1.7 バージョン以降に追加され、それ以前のメソッドよりも優れていることがわかりました。プロジェクトでは、これを使用して結果をテストしたいと思いましたが、動的に生成されたタグはクリックしても反応しませんでしたが、ライブメソッドはそれをサポートできることがわかりました。そこで、長い間情報を探してネチズンに尋ねました。ついにその答えを記事で見つけました。 。 。

jQuery が on を使用して動的に生成された要素をバインドする場合、そのオブジェクトを直接操作することはできません。代わりに、その効果を実現するには、非動的に生成された親ノードを選択し、それ自体を見つける必要があります。ソースコードを見れば誰でもわかります。メソッド上で生成されたボタン ベース アイテムは、クリックされたときは無効ですが、ライブ メソッドは有効です。

たとえば、ページには以下の 2 つの要素があります:

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

以下の jQuery コードを使用すると、比較して違いを確認できます:

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

コードは簡単なので、デモページは含めません。わからないことがあれば、メッセージを残してください。編集者がすぐに返信します。