zoukankan      html  css  js  c++  java
  • jquery动态生成html代码绑定事件

      今天工作中需要在页面动态生成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事件发现不行,没去深究原因。

    
    
  • 相关阅读:
    中国计算机学会推荐国际学术刊物 会议和期刊目录
    Windows运行(Win+R)快速启动所有程序(自定义)
    解决 Page 'http://localhost:63342/v3/js/math/math.map' requested without authorization页面未授权问题
    如何设置计算机IP地址
    VSCode 设置中文语言
    任意文件夹打开CMD命令窗口
    User-Agent
    关于deepin linux15.6-15.9.1系统播放视频卡顿解决办法
    TCP/IP协议
    HTTP协议
  • 原文地址:https://www.cnblogs.com/manliu/p/4777420.html
Copyright © 2011-2022 走看看