CODEWITHSUNDEEP
javascriptjqueryclickjquery-ui-dialog
Sangsom
Sangsom

Reputation: 257

Click event doesn't work inside jQuery dialog

got a problem that I have a form page which I open with jQuery UI dialog help. But in this page I have need to use .click event on some objects, but it doesn't work. The code for this case is simple alert() test from that page.

<input type='text' class='input_date' value='' readonly />

So I want to get alert when I click on input field inside that dialog form.

$('.input_date').click(function() {
    alert('hi')
});

What's the problem, how can I get this work? Thanks

Upvotes: 4

Views: 6414

Answers (6)

User45
User45

Reputation: 74

You have not given document ready function from jquery. You can do it by 

$(function() {
// your code
});

Sample for your program

<html>
<head>
<title>Untitled</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$(".input_date").bind("click", function(){
alert("hi");
});
});
</script>
</head>
<body>
<input type='text' class='input_date' value='' readonly />
</body>
</html>

Upvotes: 0

varun
varun

Reputation: 76

It will work fine you just need to set attribute to readonly like this:

<input type='text' class='input_date' value='' readonly="readonly">




         $('.input_date').click(function () {

              alert('hello');
          });

Upvotes: 0

SNAG
SNAG

Reputation: 2113

If the dialog html is generated dynamically, your click callback wont be attached to the ".input_date" elment. Use this instead:

$('.input_date').live('click',function() {
    alert('hi')
});

Upvotes: 1

cbelizon
cbelizon

Reputation: 234

Put your click event in the open callback, like this:

$( ".selector" ).dialog({
    open: function( event, ui ) {
       $('.input_date').click(function(){
          alert("hi!");
       });
   }
});

Upvotes: 0

anmarti
anmarti

Reputation: 5143

This is because you don't have the object you want to bind the event to at the moment of the jquery execution.

You need to delegate the event binding in a parent container or use the getScript jquery method after your dialog is loaded.

<div id="dialogContainer" />

$('#dialogContainer').on('click', '.input_date', function(){
   alert('hi');
});

Upvotes: 4

4b0
4b0

Reputation: 22321

Other options inside document.ready :

$(".input_date").keyup(function(){
 alert('hi');
});

or

$(".input_date").change(function(){
   alert('hi');
});

Upvotes: 0

Related Questions