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!!!

techfoobar · Accepted Answer · 2013-04-22 06:26:46Z

2

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.

i.e.

$(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

        ...

    });
});

answered Apr 22, 2013 at 6:26

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dennis Over a year ago

you should store the result of $(this).closest('li') into a variable first. this way, you are querying it twice. when storing the result, it is also irrelevant what operation you do first.

techfoobar Over a year ago

@Chips_100 - Agreed. Caching it into a variable makes it more efficient. Caching also removes the relevance of order of the above operations.

maximkou · Accepted Answer · 2013-04-22 06:25:11Z

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

Arun P Johny · Accepted Answer · 2013-04-22 06:27:16Z

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

xpy · Accepted Answer · 2013-04-22 06:31:41Z

0

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. e.g.

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

answered Apr 22, 2013 at 6:31

xpy

5,6813 gold badges32 silver badges52 bronze badges

Collectives™ on Stack Overflow

javascript event not processing script

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related