简体中文(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
408

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。。。。为什么呀？求助

天蓬老师
天蓬老师

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

모든 응답(6)
黄舟
黄舟2017-04-11 11:28:43 6층

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

좋다 +0
답글 추가
伊谢尔伦
伊谢尔伦2017-04-11 11:28:43 5층

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

좋다 +0
답글 추가
小葫芦
小葫芦2017-04-11 11:28:43 4층

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

좋다 +0
답글 추가
巴扎黑
巴扎黑2017-04-11 11:28:43 3층

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

$(".replyBtn").die('click').live("click", function() { 
    $("#reply1").remove();
    $(".reply").one("click", function() {
        $(this).parent().parent().append($html);
    });
});
좋다 +0
답글 추가
左手右手慢动作
左手右手慢动作2017-04-11 11:28:43 2층

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

$("").off('click','.reply');
$("").on('click','.reply',function(){});
좋다 +0
답글 추가
大家讲道理
大家讲道理2017-04-11 11:28:43 1층

<!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>

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！