CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

button continually only fire once

If keep clicking the same buttons then only fire once. sample: https://jsfiddle.net/h4wgxofh/, For example, if click1 clicked then 2nd time or more times clicks should stop firing, the same as click2 however, if I click the same button, it always fires. Also I want links only trigger once but becomes available if other buttons being clicked. (considering if more buttons) Thanks

HTML

<div class="wrap">
  <a href="#">Click1</a>
  <a href="#">Click2</a>
</div>

Script

var clicked = false;

$('.wrap').on('click', 'a', function(){
    var $this = $(this);
  clicked = true;

  if(clicked = true){
    console.log($this.text());
    clicked = false;
    }
});

Upvotes: 0

Views: 472

Answers (9)

Logar
Logar

Reputation: 1248

I'm probably missing something here, but why not just bind the event to every link in .wrap and unbind it on click like this :

$('.wrap a').on('click', function(){    
    console.log($(this).text());
    $(this).unbind('click');
});

See this fiddle

Edit : after your comment on wanting one link to be rebound after cliking on another, even though it might not be the cleanest solution, this does the job :

var onclick = function(){
    var $el = $(this);
    console.log($el.text());
    $('.wrap a').off('click', onclick);
    $('.wrap a').each(function(id, link){
        if($el.text() != $(link).text())
            $(link).on('click', onclick);
    });
}

$('.wrap a').on('click', onclick);

Fiddle again

Upvotes: 1

Sergii Shcherbak
Sergii Shcherbak

Reputation: 987

To disable both buttons after first click, try:

var clicked = false;

$('.wrap').on('click', 'a', function(){
  let $this = $(this);

  if( !clicked ){
    console.log($this.text());
    clicked = true;
  };
});

To disable each button after first click, try:

$('.wrap a').each(function() {
  let $this = $(this);
  $this.disabled = false;
  $this.on('click', function() {
    if ( !$this.disabled ) {
      console.log($this.text());
      $this.disabled = true;
    };
  });
});

Upvotes: 0

Anuj
Anuj

Reputation: 25

I think you can disable anchor link after one click like this

  <div class="wrap">

  <a href="#" id="click1">Click1</a>

  <a href="#" id="click2">Click2</a>
</div>

I think you can disable anchor link after one click like this

  <div class="wrap">
      <a href="#" id="click1">Click1</a>
      <a href="#" id="click2">Click2</a>
  </div>

$(function () {   
$('#click1').on("click", function (e) {
    $('#click1').on("click", function (e){
        e.preventDefault();
        e.preventDefault(); 
    });
});

I think its help you.

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5788

Instead of putting code on click just on first click disable anchor tag this serve the same thing you wants just find below snippet for more information using this we can reduces round trips to the click functions as well

$('.wrap').on('click', 'a', function(){
 $(this).addClass("disableClick");
});
.disableClick{
    pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <a href="#">Click1</a>
  <a href="#">Click2</a>
</div>

Upvotes: 0

Mohammed Elshennawy
Mohammed Elshennawy

Reputation: 967

You need to Distinguish between two links(i used text here you may put whatever scenario ) see this example it may help:-

var clicked1 = 0;
var clicked2 = 0;

$('.wrap').on('click', 'a', function() {
  var $this = $(this);
  var $text = $(this).text();
  //Click2
  if ($text == 'Click1') {
    clicked1 += 1;
    if (clicked1 == 1) {
      console.log($text);
    } else {
      return;
    }
  }
  //Click2
  if ($text == 'Click2') {
    clicked2 += 1;
    if (clicked2 == 1) {
      console.log($text);
    } else {
      return;
    }
  }
});

Full Demo

Upvotes: 1

Sreepathy Sp
Sreepathy Sp

Reputation: 408

try this ,much simpler and this will be more useful if you have multiple click buttons

if you had implemented some other way ,this will worth a try

     <div class="wrap">
      <a href="#" data-value="">Click1</a>
      <a href="#" data-value="">Click2</a>
    </div>

    $('.wrap').on('click', 'a', function(){
        var $this = $(this);

      if($this.attr("data-value") == ""){
        console.log($this.text());
        $this.attr("data-value","clicked")
        }
      else{
       console.log("Already clicked")
        }
    });

Fiddle

Upvotes: 0

Ataur Rahman Munna
Ataur Rahman Munna

Reputation: 3917

See the following code

var clicked1 = false;
var clicked2 = false;

$('.wrap').on('click', 'a', function(){
	var $this = $(this);
  	var clickOrigin = $(this).text();
	
  	if(clickOrigin == 'Click1' && clicked1==false){
    	   console.log("Click 1 clicked");
    	   clicked1 = true;
	}
	if(clickOrigin == 'Click2' && clicked2==false){
    	   console.log("Click 2 clicked");
    	   clicked2 = true;
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <a href="#">Click1</a>
  <a href="#">Click2</a>
</div>

Also you can find the jsFiddle.

Upvotes: 1

diplodorkus
diplodorkus

Reputation: 180

Every time someone clicks one of the buttons, your script is setting clicked from false to true, checking if the value is true, then setting it to false again. You need to format it like this if you only want the buttons to fire once (obviously you'd have to duplicate this specifically for each button with different IDs):

var clicked = false;

$('.wrap').on('click', 'a', function(){
  var $this = $(this);

  if(clicked == false){
    console.log($this.text());
    clicked = true;
  }
});

Upvotes: 0

Dennis C
Dennis C

Reputation: 24747

Just use $(".wrap").one('click', ....

Read the jquery API documentation.

Upvotes: -3

Related Questions