Question

我的登录表格如下所示，

<a href="#" id="loginLink">click Here to Log in</a>
<div class="formDiv" id="formDiv">
<form name="loginForm" id="loginForm" action="#">
    <label>Email</label><input type="text" name="email" id="email"><br/>
    <label>Passw</label><input type="password" name="pwd" id="pwd"><br/>
    <input type="submit" value="Log in" id="loginbtn" name="loginbtn">
</form>
</div>

我想使用Ajax提交此表单数据，因为当用户点击#loginbtn时，我正在执行与Ajax相关的内容，但问题是click事件在点击时未触发在#loginbtn上，这是jsfiddle。

Answer 1

由于动态添加了保存对话框的div，因此无法将click事件绑定到它。将它绑定到某个父类，它固定为document。

我编辑了小提琴并且它有效：http://jsfiddle.net/WNMfA/2/

Answer 2

尝试绑定点击事件，如下所示：

$(document).on("click","#loginbtn",function(e){
// do stuff
})

Answer 3

或者您可以在对话框定义中创建按钮，如

 $( "#dialog-form" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: {
    "Login": function() {
        alert('test');
        $( this ).dialog( "close" );
      }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
  }
});

jQuery单击事件未触发对话框按钮

3 个答案: