Question

I have a jQuery UI modal dialog, and it shows up right. Then, I have some elements inside the dialog, say

<div id="test_div">
    Test Click me
</div>

When I check for this elements in firebug, it is loaded right. But when I do this:

$("#test_div").click(function(){
    alert('I was clicked');
});

But this is not being invoked. I am using ruby on rails. I tried putting this code in the application.js, in the form from where the modal dialog is loaded, and in within the modal dialog itself, but neither works. Am I doing anything wrong? Is something needed to be different for modal dialogs? Please help.

Answer 1

Have you tried using .live to bind the events?

So

$("#test_div").live("click", function(){
    alert('I was clicked');
});

I found that helped sometimes with hidden elements

Also, are you sure the name of your control is #test_div. Don’t know about rails but .Net will alter the name of an element. For that reason I use the class selector and add a class to my element.

<div class="test_div" id="test_div">
    Test Click me
</div>

$(".test_div").live("click", function(){
    alert('I was clicked');
});

And wrap the jQuery in;

$(function(){
//your code here if you are not already
});