Binding a jQuery click event to each element within a foreach loop

Question

I am building a plugin which matches an element, finds a link within it and makes the parent element go to that location upon a click.

I have a loop in the main body:

    return this.each(function(options) 
{

    $to_link = $(this); //matched object
    link_href = $('a', $to_link).attr('href'); //link location
    $($to_link,$parent)
        .click(function(){alert(link_href); window.location = link_href; return false;})
        .attr('title','Jump to ' + link_href);
})

which I am running it against this HTML

<div id="a"><h2><a href="/products/">Products</a></h2><p>blah blah</p></div>
<div id="b"><h2><a href="/thinking/">Thinking</a></h2><p>liuhads</p></div>

The problem I have is that the click function always results in jumping to the value of the last matched div's link although the title of the element has the correct value.

To clarify, behavious should be:

div#a has a title of "Jump to /products/" and when clicked on goes to /products/
div#a has a title of "Jump to /thinking/" and when clicked on goes to /thinking/

instead, what happens is:

div#a has a title of "Jump to /products/" and when clicked on goes to /thinking/ (the alert says /thinking/ too)
div#a has a title of "Jump to /thinking/" and when clicked on goes to /thinking/

ie div#a ends up with the wrong behaviour. Im guessing this is some kind of scope issue but for the life of me I cannot see it, help!

ironfroggy · Accepted Answer · 2010-01-23 14:57:51Z

4

You are forgetting the var in your assignments, so you're sharing one global variable and getting them mixed up.

$to_link = $(this); //matched object
link_href = $('a', $to_link).attr('href'); //link location

should be

var $to_link = $(this); //matched object
var link_href = $('a', $to_link).attr('href'); //link location

Otherwise, link_href will retain the last value, and that is the value the click handler will see when its called.

answered Jan 23, 2010 at 14:57

ironfroggy

8,1257 gold badges38 silver badges45 bronze badges

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

3 Comments

Sqoo Over a year ago

Thank you! Obvious and totally missable when you're bogged down in things.

ironfroggy Over a year ago

@Sqoo I wouldn't touch the stuff

Sqoo Over a year ago

saw you were a Python developer :D

Tim Banks · Accepted Answer · 2011-07-05 19:51:04Z

4

There is a fuller answer to the general case here

http://www.foliotek.com/devblog/keep-variable-state-between-event-binding-and-execution/

answer #2 is to use a closure to force a new level of scope :)

edited Jul 5, 2011 at 19:51

Tim Banks

7,1895 gold badges33 silver badges28 bronze badges

answered Jan 28, 2011 at 23:11

Sqoo

5,2432 gold badges20 silver badges18 bronze badges

3 Comments

Sqoo Over a year ago

Shortly after this, I learned how closures really work, after that I learned exactly what JS is really capable of by reading Crockford!

Sqoo Over a year ago

So the real answer is use closures to force new scope.

Yasser Shaikh Over a year ago

answer #2 is awesome ! Solved my problem :)

Collectives™ on Stack Overflow

Binding a jQuery click event to each element within a foreach loop

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related