ホームページ > 記事 > ウェブフロントエンド > jquery で動的に生成されたタグにイベントをバインドする (詳細なチュートリアル)
jquery で動的に生成されたタグにイベントをバインドする (詳細なチュートリアル)
- 亚连オリジナル
- 2018-06-04 17:29:592516ブラウズ
ここで、jquery を使用して動的に生成されたタグにイベントをバインドするいくつかの方法の概要を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。
動的に生成されたタグにイベントをバインドするのは使いにくいということがよくありますが、簡単にテストしてまとめました。結論は次のとおりです。
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d2">
生成a标签
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn" />
</p>
</body>
<script>
$(function(){
$('#btn').bind('click', function(event) {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2");
});
///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
$('li').bind('click', function(event) {
alert("haha"); ///根本不会触发这个方法
});
})
</script>
ボタンをクリックすると、li タグが追加されます。これは機能します。
ただし、初期化中にこれを行った場合、今後動的に生成されるliタグをbindメソッドでバインドすることは無効となり、生成されたliタグをクリックしても何も反応しません。
bind メソッドは、実行時にすでに存在する静的タグの jq オブジェクトにのみイベントをバインドできるため、将来動的に追加されるタグには無効です。
現時点で、この問題を解決するにはいくつかの方法があります:
方法 1:
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d2">
动态生成a标签
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn"/>
</p>
</body>
<script>
$(function() {
///点击按钮，给d2动态添加标签
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li onclick='show()'>Hello</li>").appendTo("#d2");
});
})
function show() {
alert($(this).text());///这样打印出的是空的，没有任何东西，但是方法是会触发的（不能这样打印自己）
alert("哈哈");
}
</script>
この方法は、動的スプライシング中にトリガーされるネイティブ JS イベントを結合し、 scriptタグ内のeventメソッド。このメソッドは、li のクリック イベントをトリガーできます。ただし、ラベル自体の情報を出力するalert($(this).text())を使用する場合、結果は表示されません。ラベルを静止印刷しても表示されません。
この問題を解決するには、次の 2 つの方法を使用できます。
方法 2:
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d2">
生成a标签
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn"/>
</p>
</body>
<script>
$(function(){
$('#btn').bind('click', function(event) {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2").bind('click', function() {
/* 显示标签的内容 */
alert($(this).text()); ///这种方式也可以正常打印出 hello
});
});
})
</script>
この方法は上記の問題を解決できます。こちらもbindメソッドを使用していますが、まず対象のタグオブジェクトを持ってからbindメソッドを呼び出すので使いやすいことに注意してください。そして、実際に独自の情報を正常に出力できるのは驚くべきことです。
方法 3:
<body>
<!-- 下面是用纯动态方式生成标签 -->
<p id="d1">
测试静态标签的绑定方法
</p>
<br />
<p id="d2">
动态生成a标签的位置
</p>
<p id="d3">
<input type="button" value="生成a标签" id="btn" />
</p>
</body>
<script>
$(function(){
$('#btn').bind('click', function() {
/* 在添加标签的同时给添加的标签绑定点击事件 */
$("<li>Hello</li>").appendTo("#d2");
});
///bind方法对于动态添加的标签不好使，只对已经存在的静态标签好用
///用live方法才好用
$('li').live('click', function() {
alert($(this).text());///注意，用live还可以这样写，结果是正常的
alert("haha");
});
///通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）
$('#d1').live('click', function() {///对于静态和动态创建的标签都好使
alert($(this).text());///注意，用live还可以这样写，结果是正常的.这是非常重要的
alert("haha");
});
})
</script>
上記は皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。
関連記事:
vue でグローバル プロンプト ボックス コンポーネントを使用する方法?
vue2 でフロントエンド検索を使用するにはどうすればよいですか?
以上がjquery で動的に生成されたタグにイベントをバインドする (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。