如下代码中,用detach删除了之后,再添加没有触发点击事件

来源:4-4 DOM节点删除之保留数据的删除操作detach()

热爱生活_热爱编程

2019-03-05 15:42

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery删除节点之empty</title>

<style type="text/css">

#box1{

background-color:lightskyblue;

}

#box2{

width:100px;

height:50px;

background-color:pink;

}

#box3{

width:60px;

height:25px;

background-color:yellow;

}

</style>

<script src="jQuery/jquery-3.3.1.js"></script>

 <script>

$(document).ready(function(){

$("#box2").click(function(){

alert("触发了点击事件");

});

$("#btn1").click(function(){

$("#box2").detach();

});

$("#btn2").click(function(){

$("#box1").append("<div id='box2'><div id='box3'>12345</div></div>");

});

});

 </script>

</head>


<body>

<p>文档的一行文字</p>

<div id="box1">

<p>div的第一个子元素</p>

<p>div的第二个子元素</p>

<div id="box2">

<div id="box3">12345</div>

</div>

</div>

<button id="btn1">我可以删除子元素哦</button>

<button id="btn2">我可以增加子元素哦</button>

</body>

</html>


写回答 关注

1回答

  • 慕勒8594096
    2019-03-06 15:42:33


       




    <html>


    <head>

         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>



    <meta charset="UTF-8">


    <title>jQuery删除节点之empty</title>


    <style type="text/css">


    #box1{


    background-color:lightskyblue;


    }


    #box2{


    width:100px;


    height:50px;


    background-color:pink;


    }


    #box3{


    width:60px;


    height:25px;


    background-color:yellow;


    }


    </style>


    <script src="jQuery/jquery-3.3.1.js"></script>


     <script>

    var b;

    $(document).ready(function(){


    $("#box2").click(function(){


    alert("触发了点击事件");


    });


    $("#btn1").click(function(){


    b = $("#box2").detach();


    });


    $("#btn2").click(function(){


    $("#box1").append(b);


    });


    });


     </script>


    </head>




    <body>


    <p>文档的一行文字</p>


    <div id="box1">


    <p>div的第一个子元素</p>


    <p>div的第二个子元素</p>


    <div id="box2">


    <div id="box3">12345</div>


    </div>


    </div>


    <button id="btn1">我可以删除子元素哦</button>


    <button id="btn2">我可以增加子元素哦</button>


    </body>


    </html>

    定义一个全局变量就可以了

jQuery基础(二)—DOM篇

jQuery第二阶段开启DOM修炼,了解创建、插入、删除与替换

114012 学习 · 590 问题

查看课程

相似问题