jquery移除点击事件部分失效

Question

jquery移除点击事件部分失效

发布于
2017-10-12

这里有一个保存按钮，希望点击之后把"+"和"-"绑的点击事件取掉了，发现“+”的可以取消，“-”的失效了。为什么？（CSS 和字体忽略。。。）
HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../style/base.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../font/iconfont.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../style/common.css">
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.2/jquery.min.js"></script>

</head>

<body>
  <div class="wrapper" style="width: 1146px;margin: 0 auto;">
    <div class="page-default-item">
      <div class="page-head">
        <div class="page-btitle">
          <span class="vertically">第一版 要闻</span>
        </div>
        <div style="width:496px;display: table-cell;font-size: 0;line-height: 1;">
          <div class="page-score-title-box">
            <div class="page-score-title">责编&amp;得分</div>
            <div class="page-score-title-body">
              <div class="add-btn-box">
                <div class="add-btn vertically">
                  <i class="icon iconfont icon-shanchu2 append-btn"></i>
                </div>
              </div>
              <div class="person-choosed-box">
                <ul class="choosed-wrapper">
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="page-score-title-box">
            <div class="page-score-title">组版&amp;得分</div>
            <div class="page-score-title-body">
              <div class="add-btn-box">
                <div class="add-btn vertically">
                  <i class="icon iconfont icon-shanchu2"></i>
                </div>
              </div>
              <div class="person-choosed-box">
                <ul>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="preview-box">
            <span class="vertically">查看</span>
          </div>
        </div>
      </div>
      <div class="page-body">
        <div id="page-body-wrapper">
          <div class="page-body-head">
            <div class="page-body-head-wrapper">
              <div class="page-body-head-item tit">文章标题</div>
              <div class="page-body-head-item word">字数</div>
              <div class="page-body-head-item brower">浏览量</div>
              <div class="page-body-head-item type">稿件类型</div>
              <div class="page-body-head-item grade">稿件等级</div>
              <div class="page-body-head-item reporter">责编&amp;得分</div>
              <div class="page-body-head-item corresp">责编&amp;得分</div>
              <div class="page-body-head-item preview"></div>
            </div>
          </div>
          <div class="page-body-list">
            <div class="page-body-list-wrapper">
              <div class="page-body-list-item tit">
                <div class="vertically width_full">文章标题文章标题文章标</div>
              </div>
              <div class="page-body-list-item word">
                <div class="vertically width_full">字数</div>
              </div>
              <div class="page-body-list-item brower">
                <div class="vertically width_full">浏览量</div>
              </div>
              <div class="page-body-list-item type">
                <div class="vertically width_full">稿件类型</div>
              </div>
              <div class="page-body-list-item grade">
                <div class="vertically width_full">稿件等级</div>
              </div>
              <div class="page-body-list-item add-btn-box add-btn-box2">
                <div class="add-btn vertically">
                  <i class="icon iconfont icon-shanchu2"></i>
                </div>
              </div>
              <div class="page-body-list-item person-choosed-box person-choosed-box2" style="vertical-align: top;width: 184px;">
                <ul>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                </ul>
              </div>
              <div class="page-body-list-item add-btn-box add-btn-box2">
                <div class="add-btn vertically">
                  <i class="icon iconfont icon-shanchu2"></i>
                </div>
              </div>
              <div class="page-body-list-item person-choosed-box person-choosed-box2" style="vertical-align: top;width: 184px;">
                <ul>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                  <li class="person-choosed-item">
                    <span>赵大猫</span>
                    <input type="text" name="" value="98">
                    <i class="icon iconfont icon-shanchu11"></i>
                  </li>
                </ul>
              </div>
              <div class="page-body-list-item preview">
                 <div class="vertically width_full">查看</div>
              </div>
            </div>
          </div>
        </div>
        <div class="action-btn-box">
          <button class="inline_block save-btn">保存</button>
          <div class="inline_block slide-box" id="slide-up">收起
            <i class="icon iconfont icon-shouqi"></i>
          </div>
          <div class="inline_block slide-box" id="slide-down" style="display:none;">展开
            <i class="icon iconfont icon-shouqi1"></i>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="../js/common.js"></script>
</body>

</html>

JS：

// 10.11
$(document).ready(function() {
    // 收起展开效果
    $(".slide-box").click(function() {
        $("#page-body-wrapper").slideToggle("slow");
        $('#slide-up').toggle();
        $('#slide-down').toggle();
    });


 $(".add-btn").on("click",function(){
 var obj = '<li class=\"person-choosed-item\"><span>赵大猫</span><input type=\"text\" name=\"\" value=\"98\"><i class=\"icon iconfont icon-shanchu11\"></i></li>';
            $(this).closest('.add-btn-box').next().children().append(obj).click(delLi).end();
 });
//删除方法
    function delLi(e) {
        if ($(e.target).hasClass("icon-shanchu11")) {
            if ($(e.target).parent().parent().find("li").length > 1) {
                $(e.target).parent().remove();
            }
        }
        e.stopPropagation();
    }
//删除
    $('.icon-shanchu11').on("click",delLi);
//保存

$(".save-btn").on("click",function(e){

 $(".add-btn").off("click");

 $(".icon-shanchu11").off("click");

});
});

javascript jquery

阅读 3.3k

1 个回答

得票最新

Jake

232

发布于
2017-10-12

你的代码有2个问题

1. 新增的元素被你绑了click事件，所以依然有效

$(this).closest('.add-btn-box').next().children().append(obj).click(delLi).end();

2. on和off用法错误

on的文档，点击查看官方文档，off同理

.on( events [, selector ] [, data ], handler )

当要处理动态元素的时候，on的对象应该提升层级，即container.on ，而on方法的selector参数才是动态的元素，如此才能对动态元素进行事件处理。
js可以改成如下

// 10.11
$(document).ready(function () {
  // 收起展开效果
  $(".slide-box").click(function () {
    $("#page-body-wrapper").slideToggle("slow");
    $('#slide-up').toggle();
    $('#slide-down').toggle();
  });

  $(".wrapper").on("click", ".add-btn", function () {
    var obj = '<li class=\"person-choosed-item\"><span>赵大猫</span><input type=\"text\" name=\"\" value=\"98\"><i class=\"icon iconfont icon-shanchu11\"></i></li>';
    $(this).closest('.add-btn-box').next().children().append(obj);
  });
  //删除方法
  function delLi(e) {
    if ($(e.target).hasClass("icon-shanchu11")) {
      if ($(e.target).parent().parent().find("li").length > 1) {
        $(e.target).parent().remove();
      }
    }
    e.stopPropagation();
  }
  //删除
  $(".wrapper").on("click", ".icon-shanchu11", delLi);
  //保存
  $(".save-btn").on("click", function (e) {
    $(".wrapper").off("click", ".add-btn");
    $(".wrapper").off("click", ".icon-shanchu11");
  });
});

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

jquery移除点击事件部分失效

1. 新增的元素被你绑了click事件，所以依然有效

2. on和off用法错误

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？