Makis
Makis

Reputation: 1244

Fire click event only once

I have a a foreach loop that displays some db entries. In every entry i have a remove button that enables a bootstrap's modal. I can cancel the remove process and hide the modal. The problem is that if i cancel and i proceed to remove another entry, the click event fires alongside with the previous clicks that have been canceled.

('.removeProperty').on('click',function(){

  var id = $(this).parents('.propertyIdSelect').attr('id');

  var $this= $(this);

  $this.parents('.propertyIdSelect').css('opacity','0.5'); 

  $('#confirmRemove').on('hidden.bs.modal', function() {
      $this.parents('.propertyIdSelect').css('opacity','1');
  });

  $('.removeButton').click(function(){
    removeProperty(id,$this);
  });

});

I want when the modal is hidden

$('#confirmRemove').on('hidden.bs.modal', function() {
    $this.parents('.propertyIdSelect').css('opacity','1');
});

to reset the click event.

UPDATE:

For some reason, where i need some explanation, i did the job by changing this

$('#confirmRemove').on('hidden.bs.modal', function() {
      $this.parents('.propertyIdSelect').css('opacity','1');
});

to this

$('#confirmRemove').unbind('click').on('hidden.bs.modal', function() {
          $this.parents('.propertyIdSelect').css('opacity','1');
 });

and this

 $('.removeButton').click(function(){
        removeProperty(id,$this);
  });

to this

$('.removeButton').unbind('click').click(function(){
    removeProperty(id,$this);
});

Upvotes: 0

Views: 70

Answers (1)

davidkonrad
davidkonrad

Reputation: 85518

Use one() instead of on() - when using one() the handler is automatically rebound first time it is triggered.

$('#confirmRemove').one('hidden.bs.modal', function() {
      $this.parents('.propertyIdSelect').css('opacity','1');
});

Upvotes: 1

Related Questions