在jquery中给动态生成的标签绑定事件（详细教程）
下面我就为大家分享一篇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>点击按钮，就会在d2中添加一个li标签，这个可以。
但是，如果这样在初始化时，用bind方法给将来要动态生成的li标签绑定方法是无效的，点击生成的li标签，没有任何反应。
因为bind方法只能给在执行它时已经存在的静态标签jq对象绑定事件，对未来动态添加的标签是无效的。
这时，可以有几种方法来解决这个问题：
方法一：
<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标签中。这种方法可以触发li的点击事件。但是如果要用alert($(this).text())这种打印标签自己本身信息的东西的方法，是没有任何结果显示的。这个即使是静态的标签打印自己也是不会有显示的。
要解决这个问题，可以用下面两种方法。
方法二：
<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方法，所以也是好用的。而且它居然可以正常打印自己的信息，非常厉害。
方法三：
<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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 在jquery中给动态生成的标签绑定事件（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Tutorial BTCC: Bagaimana untuk mengikat dan menggunakan dompet MetaMask pada pertukaran BTCC?
Apr 26, 2024 am 09:40 AM
MetaMask (juga dipanggil Little Fox Wallet dalam bahasa Cina) ialah perisian dompet penyulitan percuma dan diterima baik. Pada masa ini, BTCC menyokong pengikatan pada dompet MetaMask Selepas mengikat, anda boleh menggunakan dompet MetaMask untuk log masuk dengan cepat, menyimpan nilai, membeli syiling, dsb., dan anda juga boleh mendapatkan bonus percubaan 20 USDT untuk pengikatan pertama. Dalam tutorial dompet BTCCMetaMask, kami akan memperkenalkan secara terperinci cara mendaftar dan menggunakan MetaMask, dan cara mengikat dan menggunakan dompet Little Fox dalam BTCC. Apakah dompet MetaMask? Dengan lebih 30 juta pengguna, MetaMask Little Fox Wallet ialah salah satu dompet mata wang kripto yang paling popular hari ini. Ia percuma untuk digunakan dan boleh dipasang pada rangkaian sebagai sambungan
Bagaimana untuk mengikat sub-akaun pada Xiaohongshu? Bagaimanakah ia menyemak sama ada akaun itu normal?
Mar 21, 2024 pm 10:11 PM
Dalam era ledakan maklumat hari ini, pembinaan jenama peribadi dan imej korporat telah menjadi semakin penting. Sebagai platform perkongsian kehidupan fesyen terkemuka di China, Xiaohongshu telah menarik sejumlah besar perhatian dan penyertaan pengguna. Bagi pengguna yang ingin mengembangkan pengaruh mereka dan meningkatkan kecekapan penyebaran kandungan, sub-akaun yang mengikat telah menjadi cara yang berkesan. Jadi, bagaimanakah Xiaohongshu mengikat sub-akaun? Bagaimana untuk menyemak sama ada akaun itu normal? Artikel ini akan menjawab soalan-soalan ini untuk anda secara terperinci. 1. Bagaimana untuk mengikat sub-akaun pada Xiaohongshu? 1. Log masuk ke akaun utama anda: Pertama, anda perlu log masuk ke akaun utama Xiaohongshu anda. 2. Buka menu tetapan: klik "Saya" di penjuru kanan sebelah atas, dan kemudian pilih "Tetapan". 3. Masukkan pengurusan akaun: Dalam menu tetapan, cari pilihan "Pengurusan Akaun" atau "Pembantu Akaun" dan klik
Langkah dan kaedah untuk mengikat Douyin dalam Toutiao
Mar 22, 2024 pm 05:56 PM
1. Buka Toutiao. 2. Klik Saya di penjuru kanan sebelah bawah. 3. Klik [System Settings]. 4. Klik [Tetapan Akaun dan Privasi]. 5. Klik butang di sebelah kanan [Douyin] untuk mengikat Douyin.
Bagaimana untuk mengikat apl Cainiao ke Pinduoduo? Bagaimana untuk menambah Cainiao Wrap ke platform Pinduoduo?
Mar 19, 2024 pm 02:30 PM
Aplikasi Cainiao ialah platform yang boleh memberikan anda pelbagai maklumat logistik Fungsi di sini sangat berkuasa dan mudah digunakan Jika anda mempunyai sebarang masalah berkaitan logistik, ia boleh diselesaikan di sini -perkhidmatan berhenti boleh menyelesaikan segala-galanya dalam masa Menyemak penghantaran ekspres, mengambil penghantaran ekspres, dan lain-lain semuanya tanpa sebarang masalah. Kami telah bekerjasama dengan pelbagai platform dan semua maklumat boleh ditanya Mungkin berlaku bahawa barang yang dibeli di Pinduoduo tidak dapat memaparkan maklumat logistik Sebenarnya, anda perlu mengikat Pinduoduo secara manual untuk mencapai ini. Cara mengikat Cainiao ke akaun Pinduoduo: 1. Buka APP Cainiao dan pergi ke halaman utama
Bagaimana untuk mengikat APP Cainiao kepada Pinduoduo Bagaimana untuk mengikat APP Cainiao kepada Pinduoduo
Mar 19, 2024 pm 05:16 PM
Adakah anda tahu cara mengikat Pinduoduo apabila menggunakan Cainiao Wrap App versi rasmi Cainiao Wrap tidak menyegerakkan beberapa maklumat logistik Pinduoduo pada platform ini. Apa yang perlu kami lakukan ialah Anda boleh menyalin nombor pesanan atau menyemak telefon bimbit anda untuk melihat jika ada sebarang maklumat penghantaran ekspres. Sudah tentu, ini semua perlu diselesaikan secara manual Jika anda ingin mengetahui lebih lanjut, datang dan lihat dengan editor. Cara mengikat APP Cainiao ke Pinduoduo 1. Buka APP Cainiao dan klik "Panduan Pakej" di penjuru kiri sebelah atas halaman utama. 2. Dalam antara muka, terdapat banyak laman web membeli-belah, dan akaun boleh diikat. 3. Klik untuk mengimport platform e-dagang lain. 4. Keizinan pengguna: Klik Pinduoduo untuk pergi ke antara muka
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery?
Feb 28, 2024 pm 03:12 PM
Bagaimana untuk menggunakan kaedah permintaan PUT dalam jQuery? Dalam jQuery, kaedah menghantar permintaan PUT adalah serupa dengan menghantar jenis permintaan lain, tetapi anda perlu memberi perhatian kepada beberapa butiran dan tetapan parameter. Permintaan PUT biasanya digunakan untuk mengemas kini sumber, seperti mengemas kini data dalam pangkalan data atau mengemas kini fail pada pelayan. Berikut ialah contoh kod khusus menggunakan kaedah permintaan PUT dalam jQuery. Mula-mula, pastikan anda memasukkan fail perpustakaan jQuery, kemudian anda boleh menghantar permintaan PUT melalui: $.ajax({u
Bagaimana untuk menambah tag pada Douyin untuk menarik trafik? Teg mana pada platform yang paling mudah untuk menarik trafik?
Mar 22, 2024 am 10:28 AM
Sebagai platform sosial video pendek yang popular, Douyin mempunyai pangkalan pengguna yang besar. Bagi pencipta Douyin, menggunakan tag untuk menarik trafik ialah cara yang berkesan untuk meningkatkan pendedahan kandungan dan menarik perhatian. Jadi, bagaimanakah Douyin menggunakan tag untuk menarik trafik? Artikel ini akan menjawab soalan ini secara terperinci untuk anda dan memperkenalkan teknik yang berkaitan. 1. Bagaimana untuk menambah tag pada Douyin untuk menarik trafik? Apabila menyiarkan video, pastikan anda memilih teg yang berkaitan dengan kandungan. Teg ini harus merangkumi topik dan kata kunci video anda untuk memudahkan pengguna mencari video anda melalui teg. Memanfaatkan hashtag popular ialah cara yang berkesan untuk meningkatkan pendedahan video anda. Selidik teg dan aliran popular semasa dan masukkannya ke dalam perihalan dan teg video anda. Teg popular ini biasanya mempunyai keterlihatan yang lebih tinggi dan boleh menarik perhatian lebih ramai penonton. 3. Label
Bagaimana untuk mengikat aplikasi kereta Xiaomi pada peranti longgokan pengecasan
Apr 01, 2024 pm 06:52 PM
Kereta model Mi su7 terbaru yang dilancarkan oleh Xiaomi telah mendominasi pelbagai senarai carian hangat Ramai pengguna yang kebetulan ingin membeli kereta telah memilih kereta model Xiaomi su7 untuk pembelian Jadi bagaimana anda menggunakan aplikasi kereta Xiaomi anda untuk mengikat kereta selepas memilih Jika anda memutuskan untuk menggunakan longgokan pengecasan rumah untuk mengecas, panduan tutorial ini akan memberi anda pengenalan terperinci, saya harap ia dapat membantu anda. Mula-mula, kami membuka aplikasi mudah alih Xiaomi, klik butang Saya di sudut kanan bawah, dan kemudian dalam antara muka Saya, anda boleh melihat pilihan longgokan pengecasan rumah Selepas memasuki halaman yang mengikat longgokan pengecasan, klik kod imbasan butang di bawah dan imbas kod QR pada longgokan pengecasan Kod QR boleh digunakan untuk mengikat longgokan pengecasan pada apl.
