I have two click functions, one function is for adding vacation in a list, the other function is for removing vacation from the list. When I add vacation to the list, I don't want to be able to click on that specific button again .ledig-btn
. If I remove a specific vacation from the list, then I want to be able to click that .ledig-btn
again. I have tried with jQuery(this).off('click');
and Its working, but then when I remove vacation from the list I want to add the click event again.
jQuery(".ledig-btn").on('click', function(event) {
var id = jQuery(this).attr('id');
jQuery(this).unbind("click");
jQuery('.minlista').append('<tr><td><div class="list-domains" data-id='+id+'><span class="delete-list-domains">X</span>' + '<td class="tld-sok">' + searchWord + '<div class="tld-sok-ilista">' + domain + '</div>' + '</td>' + '</div></td></tr>');
event.stopImmediatePropagation();
jQuery("tr td .list-domains").on('click', function(e) {
var delRow = jQuery(e.target).closest('tr');
delRow.remove();
});
});
According to your script, you're storing the button id as a data-attribute
called data-id
, so we can use it as follow:
function myClickHandler(event) {
var id = $(this).attr('id');
$(this).off("click");
// +--- Data attribute with the
// | related 'ledig-btn'
// v
$('.minlista').append('<tr><td><div class="list-domains" data-id='+id+'><span class="delete-list-domains">X</span>' + '<td class="tld-sok">' + searchWord + '<div class="tld-sok-ilista">' + domain + '</div>' + '</td>' + '</div></td></tr>');
event.stopImmediatePropagation();
$("tr td .list-domains").on('click', function(e) {
var ledigBtnId = $(this).data('id'); // ledig-btn ID
var delRow = $(e.target).closest('tr');
delRow.remove();
// Here we re-bind the click event handler.
$("#" + ledigBtnId).on("click", myClickHandler);
});
}
$(".ledig-btn").on('click', myClickHandler);