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
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
Share Improve this question asked Jun 26, 2013 at 11:10 SangsomSangsom 2576 silver badges15 bronze badges 1-
Put your scripts just before
</body>tag – Esailija Commented Jun 26, 2013 at 11:13
6 Answers
Reset to default 4This 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');
});
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')
});
Other options inside document.ready :
$(".input_date").keyup(function(){
alert('hi');
});
or
$(".input_date").change(function(){
alert('hi');
});
Put your click event in the open callback, like this:
$( ".selector" ).dialog({
open: function( event, ui ) {
$('.input_date').click(function(){
alert("hi!");
});
}
});
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');
});
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./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>