Question

我在Bootstrap的popover中有一个表单：

 <button type="button" style="margin-top:10px;margin-left:15px" 
        data-html="true" 
        data-content='
        <form id="AjaxloginForm">
         <input type="hidden" name="_csrf_token" value="{{ csrf_token(authenticate) }}">
        <div id="Loginresponse" style="display:none;"></div>
            <div class="form-group" style="overflow:hidden;">
            <label style="margin-top:10px;" for="inputUsername" class="col-lg-2 control-label">Username</label>
            <div class="col-lg-10">
            <input type="text" class="form-control" id="inputUsername" placeholder="Username" style="width:215px;float:right;">
            </div>
            </div>
            <div class="form-group" style="overflow:hidden;" >
            <label style="margin-top:10px;" for="inputPassword" class="col-lg-2 control-label">Password</label>
            <div class="col-lg-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" style="width:215px;float:right;">
            </div>
            </div>
             <div class="form-group">
                    <div class="checkbox">
                        <label>
                           <input type="checkbox" id="remember_me" name="_remember_me" checked /> Remember me
                        </label>
                      </div>
                  </div>
            <div class="form-group" style="overflow:hidden;text-align:center;" >
            <button type="submit" class="btn btn-primary btn-block" id="submitButton">Access</button>
            </div>
            </form>

因为表单是动态节点（仅在单击按钮时显示），所以我设置了一个动态侦听器：

$("#AjaxloginForm").on('submit',function(e)
{
  e.preventDefault();
  alert(1);
});

遗憾的是，提交表单时没有任何作用，实际上我将页面重新加载为常规表单我怎样才能实现目标？

Answer 1

如果表单是动态创建的，则应使用事件委派。

$(document).on('submit', "#AjaxloginForm", function(e) {
    e.preventDefault();
    alert(1);
});

您可以使用事件绑定时在dom上显示的任何父元素更改document

无法使用jquery在popover中提交表单

1 个答案: