简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 绑定click事件append div,点击回复再移除。为什么点击“回复”按钮会增加下次append的div的个数？
天蓬老师
天蓬老师 2017-04-11 11:26:43
0
6
373

var $html="<p id='reply1'>haha <button class='replyBtn'>回复</button></p>"
$(".reply").one("click",function(){

$(this).parent().parent().append($html);

});
$(".replyBtn").live("click",function(){

$("#reply1").remove();
$(".reply").one("click",function(){
    $(this).parent().parent().append($html);
});

});
要做的功能是点击.reply弹出回复框p，点击"回复"button关闭这个p。

问题：第一次点击.reply添加p是没有问题的;但是一旦点击了回复remove掉p后，下次再点击.reply却添加了两个p; 都关闭后再点击.reply，就添加了三个p....总之，就是点击过几次回复，下次点.reply就会出现几个p。。。。为什么呀？求助

天蓬老师
天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

reply all(6)
黄舟
黄舟2017-04-11 11:28:43 6 floor

p 虽然被移除了，但他绑定的事件并没有被解绑，$(".replyBtn").unbind().live("click",function(){...
现在jquery不建议用live了，所有一般这么写$(".replyBtn").off().on("click",function(){...

Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-11 11:28:43 5 floor

使用jquery处理事件，建议只采用on和off两个方法。

Like +0
Add Reply
小葫芦
小葫芦2017-04-11 11:28:43 4 floor

这个说明你没有删除对元素

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-11 11:28:43 3 floor

建议用on和off。
因为你没有给出结构，所以我猜问题出现在live上：
改成这样试试：

$(".replyBtn").die('click').live("click", function() { 
    $("#reply1").remove();
    $(".reply").one("click", function() {
        $(this).parent().parent().append($html);
    });
});
Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-11 11:28:43 2 floor

原先绑定的事件没有被移除

$("").off('click','.reply');
$("").on('click','.reply',function(){});
Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 11:28:43 1 floor

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title></title>

</head>
<body>
<p class="reply">回复1</p>
<p class="reply">回复2</p>
<p class="reply">回复3</p>
<p class="reply">回复4</p>
<p class="reply">回复5</p>
<p class="reply">回复6</p>
<p class="reply">回复7</p>
<p class="reply">回复8</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script>

var $html = "<p id='reply1'>haha <button class='replyBtn'>回复</button></p>";
$(".reply").one("click", function() {
    $(this).parent().parent().append($html);
});
$(".replyBtn").live("click", function() {

    $("#reply1").remove();
    $(".reply").off("click").one("click",function(){
        $(this).parent().parent().append($html);
    });
});

</script>
</html>

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！