Question

I have a simple link:

<a href="#" id="test">Test Link</a>

I want to get an alert whenever this link is pressed, so I add:

<script>
$('#test').click(function() { alert('clicked!'); } );
</script>

and it works fine, but when i move this code to a remote javascript file, it doesn’t work..

any idea why?

I’ve also tried this code:

$(document).ready(function() {
    $('#test').click(function() { alert('clicked!'); });
});

Answer 1

Your second example, using the ready function, should be working. Your first example should also work provided you include the script below the element with the ID “test” (the element has to already exist when your script runs, since you’re not waiting for DOM ready). In both cases, your script must be included below (after) the jQuery script.

Example when you don’t use ready

Example when you do use ready

I’d check that your external file is actually getting loaded (look for 404 errors in the browser console).

---

Update: From your comment below, the problem is that the “test” element doesn’t exist when you’re trying to hook up the handler. click only sets up the handler on the element if it already exists. If you’re creating the element later, you have three options (two of which are really the same):

1. Use the code you already have, but run it after you’ve created the element (e.g., in the success callback of the ajax call you’re making).
2. Use live, which basically hooks the click event document-wide and then checks to see if the element you tell it (“#test”, in this case) was clicked.
3. Use delegate on the appropriate container (the element within which you’re adding “test”). delegate is a more targeted version of live.

live and delegate are both examples of a technique called event delegation, which jQuery makes easy for you by providing those methods.

See the links for further information and examples, but for example, suppose you’re going to be adding the “test” element to an element with the ID “target”. You’d use delegate like this:

$("#target").delegate("#test", "click", function() {
    alert("Clicked");
});

That hooks the click event on “target”, but acts a lot like you’ve just magically hooked it on “test” as soon as “test” was added. Within your handler, this refers to the “test” element just as with click.