CODEWITHSUNDEEP
javascriptjquery
RichieAHB
RichieAHB

Reputation: 2088

jQuery selector with variable, not updating when variable changes

'I am trying to do something like the below that will run a function when clicking the "hit" class only when the parent "box" id is correct.

var selected = 1;    

$('#box-' + selected + ' .hit').click(function(){

    selected = randomFromTo(1,5);

});

The selected variable changes depending on other actions on the page but I can't get the function to work after any change - it stays fixed to the initially selected "box" id. I can imagine why this might be, as jQuery has taken a snapshot of that string and nothing is telling it update it but I can't figure out how to get around this.

Edit: added the selected variable's instantiation and where it gets set. I've left out the UI changes that would make this more understandable to a user.

Upvotes: 2

Views: 777

Answers (4)

Billy Moon
Billy Moon

Reputation: 58531

If I understand your problem correctly, the issue is that the selected variable is evaluated at the time your function is created. The function is bound to the click event of a set of DOM elements at that time.

After the binding, it is not possible to modify the selector, and changing any variable used during selection will have no effect.

The best way around this I can think of, is to attach the click event to all possible matches, and then further filter them inside the click handler...

$('.hit').click(function(){
    // check if the parent has the correct id
    if($(this).parent().attr('id') == 'box-' + selected){
        //function
    }
});

Upvotes: 2

Kris
Kris

Reputation: 286

Could do something like this:

var selected = null;
function setSelected(aSelected) {

    if (selected !== null) {
        // Remove existing selected click handler
        $('#box-' + selected + ' .hit').off('click.selected')
    }

    selected = aSelected;

    // Click handler for new selected el
    $('#box-' + selected + ' .hit').on('click.selected', function() { });
}

Upvotes: 1

January Piwoniusz
January Piwoniusz

Reputation: 386

I would need to see the whole context to understand, but at the first look it seems the posted code is being run once on your page.

So if You do

var selected = something;

$('#box-' + selected + ' .hit').click(function(){

    //function

});

and later on 

selected = "newvalue";

this will not change program behaviour, the click event is already set for specific objects.

The other suggestion to set click handler on .hit makes a lot of sense, and then inside the handler You could check if 

($(this).parent().attr('id')) == ("box-"+selected)

and only then execute Your code.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

You could just set the click handler on the .hit class, then check the parent nodes for the right ID within the handler itself. If you do this, make sure you defer the event correctly, otherwise you'll end up with one handler for every single .hit element.

Upvotes: 3

Related Questions