CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shubham agrawal
shubham agrawal

Reputation: 3541

JQuery Stop a click event

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>

Upvotes: 0

Views: 184

Answers (6)

Tan Duong
Tan Duong

Reputation: 2142

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

Upvotes: 0

ESP32
ESP32

Reputation: 8709

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.

Upvotes: 0

Pete
Pete

Reputation: 58422

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>

Upvotes: 1

Osama
Osama

Reputation: 3040

   

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

Upvotes: 0

zed
zed

Reputation: 143

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>

Upvotes: 0

Jeric Cruz
Jeric Cruz

Reputation: 1909

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>

Upvotes: 0

Related Questions