js输出的html内容无法点击，跪求

孤城寞子 2019-07-11 12:08:33

用js将div-a的内容输入到div-b中以后，在div-a中为span-test绑定的点击事件（弹框），在div-b中该点击事件无法执行，代码如下：（跪求~~~~）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a,
#b {
width: 200px;
height: 200px;
border: solid;
background: bisque;
position: relative;
text-align: center;

}

#a {

/* pointer-events:none; */
}

.test {
color: #4785F9;
font-size: 20px;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<div id="a">
<span class="test">
你好，这里是测试6
</span>
</div>

<div id="b">

</div>

</body>

<script type="text/javascript">
$(function() {
$(".test").click(function() {
alert("点到我了")

//设置这个以后,点击b盒子里的内容不弹框,怎么解决？？？跪求!!!!!!!!
//!!!!!!!!!!!!!
$("#b").html($("#a").html())
})

})
</script>
</html>

...全文

175 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2019-07-11

打赏
举报

事件委托就行了

scscms太阳光 2019-07-11

打赏
举报

直接赋值innerHTML是不能保留事件的。
解决：
1.修改html后重新绑定事件。
2.使用委托事件（见楼上的on方法）
3.使用克隆元素，同时克隆事件。如下：

    $(function() {

        $(".test").click(function() {

            console.log("点到我了")

            $("#b").html($("#a").clone(true))

        })

    })

hookee 2019-07-11

打赏
举报


<!DOCTYPE html>
 <html>
 <head>
	 <meta charset="utf-8">
	 <title></title>
	 <style type="text/css">
#a,
#b {
	width: 200px;
	height: 200px;
	border: solid;
	background: bisque;
	position: relative;
	text-align: center;
}

#a {
	/*  pointer-events:none; */
}

.test {
	color: #4785F9;
	font-size: 20px;
 }
	 </style>
	<script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
 </head>
 <body>

	<div id="a">
		 <span class="test">
		你好，这里是测试6
		 </span>
	</div>

	 <div id="b">
	 </div>
	<script type="text/javascript">
 $(function() {
	 $(document).on('click', '.test', function(){
		alert("点到我了");
		$("#b").html($("#a").html());
	 });
 });
	</script>

 </body>
 </html>

cn00439805 2019-07-11

打赏
举报


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a,
#b {
width: 200px;
height: 200px;
border: solid;
background: bisque;
position: relative;
text-align: center;

}

#a {

/* 	pointer-events:none; */
}

.test {
color: #4785F9;
font-size: 20px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<div id="a">
<span class="test">
你好，这里是测试6
</span>
</div>

<div id="b">


</div>

</body>


<script type="text/javascript">
$(function() {
    $("body").on("click",".test", function() {
    alert("点到我了")

    //设置这个以后,点击b盒子里的内容不弹框,怎么解决？？？跪求!!!!!!!!
    //!!!!!!!!!!!!!
    $("#b").html($("#a").html())
    })

})
</script>
</html>

讨厌走开啦 2019-07-11

打赏
举报

dom变更后要重新为dom绑定事件。

孤城寞子 2019-07-11

打赏
举报

引用 2 楼 cn00439805的回复:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a,
#b {
width: 200px;
height: 200px;
border: solid;
background: bisque;
position: relative;
text-align: center;

}

#a {

/* 	pointer-events:none; */
}

.test {
color: #4785F9;
font-size: 20px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<div id="a">
<span class="test">
你好，这里是测试6
</span>
</div>

<div id="b">


</div>

</body>


<script type="text/javascript">
$(function() {
    $("body").on("click",".test", function() {
    alert("点到我了")

    //设置这个以后,点击b盒子里的内容不弹框,怎么解决？？？跪求!!!!!!!!
    //!!!!!!!!!!!!!
    $("#b").html($("#a").html())
    })

})
</script>
</html>

谢谢啦，问题成功解决