current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Okay, here's the problem. I have a jqGrid dialog that only generates in the HTML after you click the "add records" button.

I attached a "Click" event handler to a button in that dialog to open a pop-up when clicked (this is done after document ready), but it's not working because when the page loads, the event handler is processed by IE and it sees that the dialog doesn't exist at the moment and deletes or voids the currently invalid handler.

How do you attach a JavaScript event handler to that dialog (or any element for that matter) to perform a function when it doesn't exist when the page is loaded?

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

If you can put some part of the dialog (even just a placeholder div where you will insert the dialog's HTML) in the HTML that loads at page load, you can use delegated events in jQuery to attach event handlers to descendant elements that don't exist in the DOM at page load (like your dialog's elements).

See jQuery documentation for on().

This will bind an event handler to the click event for a button with ID myButtonId added to the DOM at any point in the future as long as it is inside the placeholder div:

<div id="divPlaceholder"><!-- dialog will be inserted into DOM here --></div>

<script type="text/javascript">
    $($("#divPlaceholder").on("click", "#myButtonId", function() {
        window.open(...);
    }));
</script>

Alternatively, whatever script you have running when the user clicks "add records" in order to display the jqGrid dialog could display the dialog, then add the event handler directly to the button.

share|improve this answer
    
Thanks for the hint. Turns out, this works: $("#dialog").on("click", "html", function() { ... }); but $("#dialog").click(function() { ... }); doesn't. Weird. I thought on("click",func()) and click(func()) are identical. –  RedAces Jul 12 '13 at 14:59
1  
@RedAces - .click(handler) is a shortcut for .on('click', handler), and that would work for a click event directly on the #dialog element, but .on() is overloaded with a different func: .on('click', selector, handler). This overload takes a selector that filters the elements for which the handler will run to some subset of elements inside #dialog. This is the "delegated", rather than "direct", way to attach the handler. The way you're using "html" as a selector is a nonsensical filter. It would be better to use a selector that identifies the button(s) added inside #dialog. –  nekno Jul 15 '13 at 0:09
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.