CODEWITHSUNDEEP
jquerypopupjquery-ui-dialog
Hybride
Hybride

Reputation: 322

jQuery click does not work in pop-up

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?

Upvotes: 0

Views: 5708

Answers (3)

Rohit
Rohit

Reputation: 356

Agree with @voigtan. Assigning event-handlers for dynamic content can be tricky.

It might be the case that the event handler is not bound for the content in the popup, in case when you bind events in the document ready handler. There are two ways you could take care of that:

  1. Have a callback after the popup content is displayed, and bind the events for new elements

  2. If the elements have a uniform event handler, assign them a class which could be used as a selector and attach the events with jQuery::live() call. Here is an example:

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

$(function() {
    $(document).on("click", "a.send-email", function(e) {
        alert('works');
        e.preventDefault();
    });
});

Upvotes: 1

Phillip Schmidt
Phillip Schmidt

Reputation: 8818

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"); });

Upvotes: 1

voigtan
voigtan

Reputation: 9031

what do you mean with pop-ups? is it jQueryUI dialog you mean? if so does the markup exist when you load the javascript code?

you could use .on if you are using jQuery 1.7+ and just do a delegate on all #send-email that is either on the page when it loads or you load it in dyanmic with AJAX:

$(function() {
    $(document).on("click", "#send-email", function(e) {
        alert('works');
        e.preventDefault();
    });
});

Upvotes: 0

Related Questions