jQuery/Javascript: How to get anonymous function to reference variable declare outside?

Question

I have some jQuery code that doesn't work as expected.

$('a[href^="http://"]').not('[href^="http://mydomain.com"], [href^="http://itunes.apple.com"]').click(function (e) {
    e.preventDefault();
    console.log("external: " + this.getAttribute('href'));
    var url = this.getAttribute('href');
    foo.track(
        "External", 
        { 'URL': url }, 
        function (url) { 
            location.href = url 
        }
    );
});

For this example, I'm tracking all external clicks from my domain, except for iTunes apps store. Assume foo.track() is a 3rd party method I'm using to track some events for reporting. The last parameter to it is an anonymous function that is executed once the tracking call successfully returns.

The code above is trying to navigate everything to http://mydomain.com/1 for some reason. However, the console.log statement succesfully logs the expected values. It's as if the url variable isn't referencing the value I expect. I've also tried replacing location.href = url with window.location = url but I get the same result.

What am I doing wrong?

Personally, I think you'd be MUCH better off doing this on the server side than client side. — Relequestual
– Relequestual, Commented Feb 11, 2012 at 22:47
You've declared "url" as a parameter to that anonymous function. What do you see when you do the console.log() from inside that function? — Pointy
– Pointy, Commented Feb 11, 2012 at 22:49
As a side comment, I recommend event delegation for this. You don't want to explicitly bind to all your external links. — Šime Vidas
– Šime Vidas, Commented Feb 11, 2012 at 22:51
@TMC Instead of binding the event handler to every anchor, with event delegation you bind it to a common ancestor element (in this case you can bind it to the BODY element). Then, inside the even handler, you use the event.target reference to determine which anchor (if any) was clicked. You can do this because events bubble up the DOM tree, so if you click an anchor, the "click" event will fire at the BODY element also. There are plenty of articles on the internet. Google "jquery event delegation". — Šime Vidas
– Šime Vidas, Commented Feb 12, 2012 at 1:58

Diego · Accepted Answer · 2012-02-11 22:51:17Z

1

Just remove the parameter from the navigation function. Like this:

$('a[href^="http://"]').not('[href^="http://mydomain.com"], 
                             [href^="http://itunes.apple.com"]').click(function (e) {
e.preventDefault();
console.log("external: " + this.getAttribute('href'));
var url = this.getAttribute('href');
foo.track("External", { 'URL': url }, function (/*url*/) { location.href = url });
});

answered Feb 11, 2012 at 22:51

Diego

18.5k5 gold badges67 silver badges68 bronze badges

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

1 Comment

Šime Vidas Over a year ago

That's probably it. The foo.track() function probably passes 'http://mydomain.com/1' to the function call for some reason...

Collectives™ on Stack Overflow

jQuery/Javascript: How to get anonymous function to reference variable declare outside?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related