javascript event not processing script

Question

i am getting an awkward problem on my javascript, basically i have written the following javascript to remove dynamically added li tabs in my page, but it is not processing, the javascript is:

$(document).ready(function(e) 
{
    $(".close").on("click", this, function() 
    {
        $(this).closest("li").remove();
        var panelId = $(this).closest('li').attr('href');
        // $(this).closest('#content').remove();
        // $('#tab1').remove();
        $('#nav-tabs a:last').tab('show');

            $('#close1').on('click',this, function() 
            {
                $('.tab1').remove();
                $('#nav-tabs a:last').tab('show');
            })

            $('#close2').on('click',this, function() 
            {
                $('.tab2').remove();
                $('#nav-tabs a:last').tab('show');
            }) 

            $('#close3').on('click',this, function() 
            {
                $('.tab3').remove();
                $('#nav-tabs a:last').tab('show');
            })


        })
        if(counter <= 1){
            counter = 1;
        }else  {
            counter--;
        }
        return false;
    })
});

the problem is when the i/user clicks on .close[button having close class] this javascript does nothing, even though it should remove the closest li tag; moreover, when i paste this in the addition javascript[javascript to add li tags] this starts working!!!

Answer 1

The problem is that you are removing the li first and then attempting to read one of its attributes afterwards.

You need to remove the li after doing all the stuff that needs access to it or its properties.

ie

$(document).ready(function(e) {
    $(document).on("click", ".close", function() {

        var panelId = $(this).closest('li').attr('href'); // get the href first
        $(this).closest("li").remove(); // now delete the li

        ...

    });
});

Answer 2

Try this:

$(document).ready(function(e) 
{
    $(document).on("click", ".close", function() 
    {
        $(this).closest("li").remove();
        var panelId = $(this).closest('li').attr('href');
        // $(this).closest('#content').remove();
        // $('#tab1').remove();
        $('#nav-tabs a:last').tab('show');

            $(document).on('click','#close1', function() 
            {
                $('.tab1').remove();
                $('#nav-tabs a:last').tab('show');
            })

            $(document).on('click','#close2', function() 
            {
                $('.tab2').remove();
                $('#nav-tabs a:last').tab('show');
            }) 

            $(document).on('click','#close3', function() 
            {
                $('.tab3').remove();
                $('#nav-tabs a:last').tab('show');
            })


        })
        if(counter <= 1){
            counter = 1;
        }else  {
            counter--;
        }
        return false;
    })
});

Answer 3

You are removing the li before the id is read, so panelId will be undefined , also you will have to use event delegation based event hadndling

$(document).ready(function(e) {

    $('#close1').on('click', this, function() {
                $('.tab1').remove();
                $('#nav-tabs a:last').tab('show');
            })

    $('#close2').on('click', this, function() {
                $('.tab2').remove();
                $('#nav-tabs a:last').tab('show');
            })

    $('#close3').on('click', this, function() {
                $('.tab3').remove();
                $('#nav-tabs a:last').tab('show');
            })

    $(document).on("click", ".close", function() {
                var panelId = $(this).closest('li').attr('href');
                $(this).closest("li").remove();
                $('#nav-tabs a:last').tab('show');
            })

    if (counter <= 1) {
        counter = 1;
    } else {
        counter--;
    }
    return false;
})

Answer 4

The most obvious reason is that when you bind the event, there are no .close elements present in the DOM. One simple solution to that, is to use event delegation which can be also achieved with jQuery on() . In other words, the event will be bound to another element, parent of the desired target element. This way, you onlu have to bind the event once and you won't have to re-bind it on every new element in runtime. eg

$(window).click('.close',yourCloseFunction);