Click event doesn't work inside jQuery dialog
Question
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
6 answers
solution1
4 ACCPTED 2013-06-26 11:15:36
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');
});
solution2
1 2013-06-26 11:20:57
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')
});
solution3
0 2013-06-26 11:14:27
Other options inside document.ready :
$(".input_date").keyup(function(){
alert('hi');
});
or
$(".input_date").change(function(){
alert('hi');
});
solution4
0 2013-06-26 11:17:42
Put your click event in the open callback, like this:
$( ".selector" ).dialog({
open: function( event, ui ) {
$('.input_date').click(function(){
alert("hi!");
});
}
});
solution5
0 2013-06-26 11:28:56
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');
});
solution6
0 2013-06-26 12:01:59
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.