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

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" );
  }
});