Question

I have two files that are exact in coding, file A and B. Within File A, there are links to create a popup of File B. At the top of file A, I created a link (a href) that, when clicked, alerts the user. This exact code is in file B. It works in file A, but not in file B.

    <a href="#" id="send-email">Send Email</a>

And the jQuery:

    $('#send-email').click(function(e) {
        alert('works');
    });

The curious thing is, they are all linked to the same external jQuery file, and every other jQuery function that is there works (eg, accordion menu), except this popup click. I tried using the jQueryUI first, but that’s how I discovered this issue; then I went down to just the barebones click-alert, and that’s the code I posted above.

Does .click work in pop-ups? If so, how?

Answer 1

A pop up is really no different than any other page (except when you get into talking about session state and contexts in certain browsers, but that isn’t the issue here). click functions the same way in a pop up that it does in any other window. There are lots of things that could be causing your issue, though. Duplicate ID’s, missing/misspelled function, etc.

So I can’t give you a definitive answer yet, but here’s a good step to debug it:

instead of attaching a click event to it the way you’re doing it (note that your way is far more correct than my way, but my way aids in debugging), do it like this:

<a href="#" onclick = "alert('works')" id="send-email">Send Email</a>

If that doesn’t work, maybe you’re blocking pop-ups or something. It’s a problem with the alert. If it DOES work, try this:

<a href="#" onclick = "AlertIt()" id="send-email">Send Email</a>

with this elsewhere on your page:

function AlertIt() {
alert("worked");
}

If this works too, you’re more than likely looking at a problem loading jQuery or a jQuery conflict.

Edit: oh, one more thing. Try using jQuery’s live function. This attaches the event handler to elements whether they exist already or not. click will only attach the event if the element already exists. It is possible that this is caused by the order of operations, so to speak, that you’re using.

live looks like this:

$("#send-email").live("click", function(){ alert("Worked"); });