jQuery.url plugin not working from within click handler function

Question

I'm trying to use the jQuery.url plugin (http://projects.allmarkedup.com/jquery_url_parser/) to grab a specific parameter from the query string of a url of an anchor which has just been clicked on, like so:

HTML:

<a class="clickonme" href="http://www.example.com/my/url/params?myparam=ABC123"&gt;Link text</a>

JavaScript:

    var myParam = '';
$("a.clickonme").click(function() {
    myParam = jQuery.url.setUrl($(this).attr('href')).param('myparam');
            console.log('myParam: '+myParam);
    return false;
});

What I'm expecting to see is 'myParam: ABC123' in FireBug's console, but instead I get the error: "jQuery.url is undefined".

I've tested whether my script can see the url plugin by running the following code:

    var myURL = 'http://www.example.com/my/url/params?myparam=ABC123';
var myParam = jQuery.url.setUrl(myURL).param('myparam');
$("a.clickonme").click(function() {
    console.log('myParam: '+myParam);
    return false;
});

When I run this, the jQuery.url plugin works fine (there are no JavaScript errors in the console and my desired result 'myParam: ABC123' is returned).

So basically, when I try to use the jQuery.url plugin inside a click handler, the script appears to not know it exists, but if I move it outside the click handler, it works as normal.

Any thoughts?

Answer 1

$(document).ready(function() {
    $("a.clickonme").click(function() {
        myParam = jQuery.url.setUrl($(this).attr('href')).param('myparam');
        console.log('myParam: '+myParam);
        return false;
    });
});