jquery复制dom对象，不复制事件的问题

最新推荐文章于 2022-11-13 10:18:37 发布

JustMarker

最新推荐文章于 2022-11-13 10:18:37 发布

阅读量5.9k

点赞数

分类专栏：前端 jquery easyui 文章标签： jquery 复制事件 easyui插件

本文链接：https://blog.csdn.net/u010742206/article/details/50429222

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

easyui

4 篇文章 0 订阅

订阅专栏

复制dom对象的时候，只能复制内容，不能复制事件，点击任何一个地方，总是第一个dom执行动作。
看以下例子：

<script type="text/javascript">
$(function(){
    $("#add").on("click",function(){
        $("#group").append($(".person:last").clone(true));
    });
    $("#del").on("click",function(){
        if($(".person").length >1){
            $(".person:last").remove();
        }
    });
});
</script>
<body>
    <div class="group" id="group">
        <div class="person" id="person_0">
            姓名：<input class="easyui-textbox" name="name" />
            性别：<input class="easyui-combobox" name="sex" data-options="valueField:'id',textField:'text',data:[
            {id:'',text:'选择'},
            {id:'0',text:'女'},
            {id:'1',text:'男'}
            ]" />
        </div>
    </div>
    <button id="add">添加</button>
    <button id="del">删除</button>
</body>

可以比较正确的添加和删除内容。
这里写图片描述

可是，添加之后，点击任何一个下拉框，总是自动选择第一个。原因是：
clone的时候，不仅是把dom对象克隆了，还把第一个dom对象的事件也克隆了，所以造成了这样一个结果。
解决办法：

<script type="text/javascript">
$(function(){
    var tmp_html = $(".person").html();//必须在渲染前写，不然会出现两个下拉框
    $(".person select").combobox({panelHeight:"auto"});//渲染第一个下拉框
    $("#add").on("click",function(){
        // $("#group").append($(".person:last").clone(true));
        $("#group").append('<div class="person">'+tmp_html+'</div>');
        $(".person:last").find("select").combobox({panelHeight:"auto"});//渲染新添加的下拉框
    });
    $("#del").on("click",function(){
        if($(".person").length >1){
            $(".person:last").remove();
        }
    });
});
</script>
<body>
    <div class="group" id="group">
        <div class="person">
            姓名：<input class="easyui-textbox" name="name[]" />
            性别：<select name="sex[]" data-options="valueField:'id',textField:'text',width:'100',data:[
            {id:'',text:'选择'},
            {id:'0',text:'女'},
            {id:'1',text:'男'}
            ]"></select>
        </div>
    </div>
    <button id="add">添加</button>
    <button id="del">删除</button>
</body>

复制dom对象的html代码后，用combobox渲染一下，就可以正常使用了。

这里说一下，为什么要把input改成select，为什么还要把class=”easyui-combobox”去掉。
是因为在渲染第一个对象的时候，会同时把姓名框也渲染，为了和input区别开，所以改成select。easyui插件存在这样一个bug，就是clone的时候会把事件也克隆，不能自动渲染克隆后的元素。

JustMarker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jquery复制dom对象，不复制事件的问题

看以下例子：<script type="text/javascript">$(function(){ $("#add").on("click",function(){ $("#group").append($(".person:last").clone(true)); }); $("#del").on("click",function(){
复制链接

扫一扫

专栏目录