javascript - JQuery 停止点击事件

Question

在将 id 属性添加到 a 标记时，与其关联的事件会自动运行。如何阻止这种情况发生。

a 标签带有 .show-all 类，当我点击它时我添加了一个 id #hide-all。现在我希望如果我点击那个 id，数据应该隐藏，但问题是它在点击 .show-all 时运行。

FIDDLE

代码如下:

$(".show-all").click(function(e) {
  $(".data").show();
  $(this).text("Hide-All");
  $(this).removeClass("show-all");
  $(this).attr('id', "hide-all");
});
$(document).on('click', "#hide-all", function(e) {
  $(".data").hide();
  $(this).text("Show-All");
  $(this).removeAttr("id");
  $(this).addClass("show-all");
});

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

Answer 1

我会在同一个元素上进行两个绑定(bind)，因为它与您单击以执行显示和隐藏的操作相同:

$(".show-all").click(function(e) {
  var link = $(this); // cache this for better performance
  if (link.text() === 'Show all') {
    $(".data").show();
    link.text("Hide all")
      .removeClass("show-all") // you can chain these, you don't need to put $(this) before each
      .attr('id', "hide-all"); // don't know if you still need this
  } else {
    $(".data").hide();
    link.text("Show all")
      .removeAttr("id")
      .addClass("show-all");
  }
});

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>

更新

正如您所说，这只是一个示例，您需要重新绑定(bind) - 唯一的方法是取消绑定(bind)以前的事件或使用 .one 这样您只绑定(bind)一个点击事件并重新绑定(bind)点击时的新事件:

bindShow();

function bindShow() {
  $(".show-all").one('click', function(e) { // only bind one click - as it will change to a hide once clicked
    $(".data").show();
    $(this)
      .text("Hide all")
      .removeClass("show-all")
      .attr('id', "hide-all");
      
      bindHide();
  });
}

function bindHide() {
  $("#hide-all").one('click', function(e) {
    $(".data").hide();
    $(this)
      .text("Show all")
      .removeAttr("id")
      .addClass("show-all");
    
    bindShow();
  });
}

.data {
  display: none;
}

a {
  text-decoration: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
  <a class="show-all">Show all</a>

  <div class="data">
    <p>
      A1
    </p>
    <p>
      A2
    </p>
    <p>
      A3
    </p>
    <p>
      A4
    </p>
  </div>
</div>