zoukankan      html  css  js  c++  java
  • jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能。中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后)     

       使用到的jquery方法和思想就是:事件的绑定和销毁(unbind),另外还可以使用clone,通过克隆可以很好的解决这个问题          相关描述如下

    功能:点击增加,自动添加一个iptdiv 点击 iptdiv后的 X 自动删除当前div

    问题:默认存在的(也就是页面加载进来的)的那个iptdiv 后的 X 点击有效,可以删除当前 iptdiv  但是 jquery 动态添加进的 iptdiv 则点击没有效果。请各位大侠给看看,提供些意见。我要的就是动态添加和删除div 问题代码如下: 

    <script type="text/javascript" src="jquery.js"></script>
    <body>
    <form action="" method="post" enctype="multipart/form-data">
    <label>请选择上传的图片</label>
    <a href="javascript:addimg()" >增加图片</a>
    <div id="mdiv">
    <div >
    <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
    </div>
    </div>
    <input type="submit" name="submit" value="上传图片" />
    </form>
    <script type="text/javascript" >
    $(document).ready(function(){
    $("a[name=rmlink]").click(function(){
    $(this).parent().remove();
    })
    })
    function addimg(){
    $("#mdiv").append('<div ><input type="file" name="img[]" /><a href="#" name="rmlink">X</a></div>');
    }
    </script>
     

    jquery方法的绑定侦听和销毁来解决动态div的增加删除:

    正确代码:
    <script type="text/javascript" >
    $(document).ready(function(){
     bindListener();
    })
    
    function addimg(){
     $("#mdiv").append('<div ><input type="file" name="img[]" /><a href="#" name="rmlink">X</a></div>');
    
     // 为新元素节点添加事件侦听器
      bindListener();
    }
    
    // 用来绑定事件(使用unbind避免重复绑定)
    function bindListener(){
     $("a[name=rmlink]").unbind().click(function(){
      $(this).parent().remove();
        })
    }
    </script>
    
    这中间就是存在一个事件绑定的过程,如果没有的话通过js加进来的div内不事件并不会被执行,添加了侦听事件功能后才能正确运行
     

    jquery的clone方法来解决动态div的增加删除:

    这里还有更好的写法,我做了些许的修改,也许弄巧成拙了。 

    <body>
    <div style="display:none;">
    <!--clone div start-->
        <div >
            <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
        </div>
    </div>
    <!--clone div end-->
    <form action="dowater.php" method="post" enctype="multipart/form-data">
    <label>请选择上传的图片</label>
    <a href="#" id="addimg" >增加图片</a>
    <div id="mdiv">
        <div >
        <input type="file" name="img[]" /><a href="#" name="rmlink">X</a>
        </div>
    </div>
    <input type="submit" name="submit" value="上传图片"  />
    </form>
    <script type="text/javascript" >
    var temp; 
    $(document).ready(function(){        
     temp = $(".iptdiv:first");
     $("a[name=rmlink]").click(function(){
      $(this).parent().remove();
        })
     $("#addimg").click(function(){
      temp.clone(true).appendTo($("#mdiv"));
     })
    })
    </script>
    </body>
  • 相关阅读:
    [CQOI2017] 小Q的棋盘
    CF75D Big Maximum Sum
    Dockerfile
    docker镜像与容器的导出导入
    ubuntu安装glusterFS
    常用工具网站网址
    国内数据分析平台
    清理系统垃圾
    sql注入笔记
    shopify Liquid语言学习知识点总结
  • 原文地址:https://www.cnblogs.com/ranzige/p/3881032.html
Copyright © 2011-2022 走看看