Click事件在jQuery对话框中不起作用

时间:2013-06-26 11:10:58

标签: javascript jquery click jquery-ui-dialog

遇到一个问题,我有一个表单页面,我用jQuery UI对话框帮助打开。但是在这个页面中,我需要在某些对象上使用.click事件,但它不起作用。 这种情况的代码是来自该页面的简单alert()测试。

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

所以当我点击该对话框表单中的输入字段时,我想要提醒。

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

问题是什么,我怎样才能完成这项工作?感谢

6 个答案:

答案 0 :(得分:4)

这是因为在jquery执行时你没有想要绑定事件的对象。

您需要delegate父容器中的事件绑定,或者在加载对话框后使用getScript jquery方法。

<div id="dialogContainer" />

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

答案 1 :(得分:1)

如果动态生成对话框html,则单击回调不会附加到“.input_date”元素。请改用:

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

答案 2 :(得分:0)

document.ready中的其他选项:

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

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

答案 3 :(得分:0)

将您的点击事件放入公开回调中,如下所示:

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

答案 4 :(得分:0)

它只需将属性设置为只读即可正常工作  这样:

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




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

              alert('hello');
          });

答案 5 :(得分:0)

您还没有从jquery中提供文档就绪功能。你可以通过

来做到这一点
$(function() {
// your code
});

您的计划示例

<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>