jquery动态生成html代码绑定事件_jquery on click 动态生成的html-优快云博客

本文链接：https://blog.youkuaiyun.com/G11176593/article/details/127757411

本文介绍了在使用jQuery 1.9.11时，如何为动态生成的HTML元素绑定click事件。作者通过使用.on()方法在父元素上绑定事件，解决了click事件失效的问题。示例代码展示了如何在点击添加按钮后，在.h3元素后面追加新的h3元素，并确保所有h3元素（包括新生成的）都有click事件监听器。此外，还提到hover事件在测试中未能成功绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法。

　　我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码：

    <div class="h3">
        <h3>李健1</h3>
        <h3>李健2</h3>
        <h3>李健3</h3>
        <h3>李健4</h3>
        <h3>李健5</h3>
    </div>
    <div class="div">增加</div>

　　　　$(function(){
            $(".div").click(function(){
                var h = "";
                for(var i=0;i<5;i++){
                    h += "<h3>李健"+i+i+"</h3>";
                }
                $(".h3").append(h);
            });
　　　　});
//这里我每点击增加一次会在<div class="h3">最后增加5行<h3>李健i</h3>,我现在要让所有的<h3>都绑定click事件(包括动态生成的)

　　$(".h3").on("click","h3",{foo:"文本:"},function(event){
　　　　alert(event.data.foo+this.textContent);
　　});

是不是很简单,这里选择<div class="h3">作为父元素调用on方法绑定click事件,这样父元素下的所有元素都绑定了click事件,有时候并不需要所有的都绑定,那怎么办？好办,只需在"click"后增加选择器(也就是你想选定的子元素),{foo:"文本:"}:表示传给event.data的数据(参数),在处理函数中我们可以调用event.data.foo读取到传入的函数值。打开浏览器调试工具你还可以获取<h3>中的文本,我这里是this.textContent,大家可以根据实际情况发挥。

　　总之,记住如果你要绑定动态生成的元素事件，一定要先找到他的父元素(父元素不能是动态生成的,否则继续往上找),在父元素中绑定，然后再进行过滤就ok了,对了，我测试了hover事件发现不行,没去深究原因。