Jquery click only executing once

Question

my code is only working once. When I click on the button, the code executes fine. But when I do the same after it executed fine once, it doesn't work, I don't even get the alert('clicked').

Anyone knows why? Here is the code:

$('#eucontentpage #country-choice .item .lang-ico').click(function(){
    alert('clicked');
    $(this).parent().removeClass('item');
    var country = $(this).parent().attr("class");
    var language = $(this).html();
    var pathArray = window.location.pathname.split( '/' );
    var newPathname = "";
    for (i = 0; i < 5; i++) {
      newPathname += pathArray[i];
      newPathname += "/";
    }
    var loadlink = newPathname + country + "/index_"+ language +".htm #nationalcontentpage";

    $.when(
        $('.lightbox').after('<div id="insertnationalcontent"></div>')
    ).done(function() {
        $("#insertnationalcontent").load(loadlink),
        $('#jb-window').hide(),
        $('#jb-window-content').hide(),
        $('#jb-overlay').hide(),
        $(this).parent().addClass('item'),
        $('#insertnationalcontent').fadeIn('slow'),
        $.history.load( '' )
    });

    return false;
});

I'm guessing this line is causing the jQuery selector not to match anymore: $(this).parent().removeClass('item'); — Eric Mahieu
– Eric Mahieu, Commented Feb 25, 2015 at 13:07
I tried to leave it out of the click event, but it doesn't change a thing: $('#eucontentpage #country-choice .lang-ico').click(function(){ — jens_vdp
– jens_vdp, Commented Feb 25, 2015 at 13:14
@jens_vdp, can you also add your HTML in the question or better yet, create a JSfiddle :) — Refilon
– Refilon, Commented Feb 25, 2015 at 13:24
do $('#eucontentpage #country-choice).find('.lang-ico').click(...); — johanthuresson
– johanthuresson, Commented Feb 25, 2015 at 14:10

Refilon · Accepted Answer · 2015-02-25 13:23:31Z

Try it like this:

$('#eucontentpage #country-choice').on("click",".item .lang-ico",function(){ // this first part is different
    alert('clicked');
    $(this).parent().removeClass('item');
    var country = $(this).parent().attr("class");
    var language = $(this).html();
    var pathArray = window.location.pathname.split( '/' );
    var newPathname = "";
    for (i = 0; i < 5; i++) {
      newPathname += pathArray[i];
      newPathname += "/";
    }
    var loadlink = newPathname + country + "/index_"+ language +".htm #nationalcontentpage";

    $.when(
        $('.lightbox').after('<div id="insertnationalcontent"></div>')
    ).done(function() {
        $("#insertnationalcontent").load(loadlink),
        $('#jb-window').hide(),
        $('#jb-window-content').hide(),
        $('#jb-overlay').hide(),
        $(this).parent().addClass('item'),
        $('#insertnationalcontent').fadeIn('slow'),
        $.history.load( '' )
    });

    return false;
});

johanthuresson · Accepted Answer · 2015-02-25 13:12:36Z

0

You are removing the "item" class from the parent object. while using it in the object reference "#eucontentpage #country-choice .item .lang-ico".

After removing the item class your referens does not match the any more.

try using just

$('.lang-ico').click(function(){...}

answered Feb 25, 2015 at 13:12

johanthuresson

5803 silver badges5 bronze badges

Comments

AsgarAli · Accepted Answer · 2015-02-25 13:15:20Z

0

You are doing $(this).parent().removeClass('item'); So when this code executes it removes item class that's why your DOM selector is not matching.

Just comment below line your code will be executed multi time. $(this).parent().removeClass('item');

answered Feb 25, 2015 at 13:15

AsgarAli

2,2092 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

Jquery click only executing once

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest