Reputation: 1244
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
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