jQuery的停止点击事件

Question

While adding a id attribute to a tag the event associated with it runs automatically. How to stop that from happening.

There is a tag with .show-all class when I click on that I am adding a id #hide-all .Now I want that if I click on that id the data should hide but the problem is it is running on click of .show-all .

FIDDLE

Here is the code:

 $(".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

I would just do both bindings on the same element as it is the same thing you will be clicking to do the show and hide:

 $(".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> 

Update

As you have said that this is only an example and you would need to rebind - the only way to do this is unbind previous events or use .one so you only bind one click event and rebind a new event at the point of clicking:

 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> 

Answer 2

If you just want to hide/show your <div class="data"> you can just use .toggle() and compare the text content of the .show-all class

 $(".show-all").click(function(e) { $(".data").toggle(); if ($(this).text() == "Show-All"){ $(this).text("Hide-All") } else if ($(this).text() == "Hide-All"){ $(this).text("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 3

I think you are looking for a toogle function:

$('.toggle).on('click', function(e) {
    $(".data").toggle();
});

EDIT:

The problem is that you have already attached the event to the element. Even if you then change the class/id of the element, the event will stay attached.

But you could store the current status in a variable:

  var status = 0
  $(".btn").on("click", function() {
    if (status === 0) {
      $(this).html("Send Event 2");
      $("#output").html("Received Event 1");
      status = 1;
    } else {
      $(this).html("Send Event 1");
      $("#output").html("Received Event 2");
      status = 0;
    }
  });

See this Plunker: https://plnkr.co/edit/bEn4q0RhrotEuo3RoaDa?p=preview

If you don't like the idea with the variable you can set a flag in the the data attribute of the link:

<a href="#" class=".btn" data-status="0"> 

You can then change the data-status attribute with jQuery on each click.

Answer 4

Here you are https://jsfiddle.net/rp5teg49/3/

 $(".show-all").click(function(e) { $(".data").toggle('fast'); if ($(this).text() === "Hide-All") { $(this).text("Show-All"); } else { $(this).text("Hide-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> 

Because when you add event, 2 events are call

$(".data").hide(); 
$(".data").show(); 

You can console log in 2 event and see what happend

Answer 5

Try this...

 $(document).on('click',".show-all",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 6

 $(".show-all").click(function(e) { if( $(this).attr('id')!='hide-all'){ $(this).text("Hide-All"); $(this).removeClass("show-all"); $(this).attr('id', "hide-all"); $(".data").show(); } else{ $(".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>