javascriptjquerybindunbind

How can I use bind and unbind with this?


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();
    });
});

Solution

  • 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);