preventDefault 表单提交在引导弹出窗口中不起作用答案

【问题标题】：preventDefault form submit not working in bootstrap popoverpreventDefault 表单提交在引导弹出窗口中不起作用
【发布时间】：2016-08-22 13:20:37
【问题描述】：

我有一个引导弹出框元素，里面有一个表单。

我在提交表单时执行preventDefault()，但它实际上并没有阻止提交。

当我不使用弹出框和模态框时，它可以完美运行。

这是我的 HTML：

<div class="hide" id="popover-content">
    <form action="api/check.php" class="checkform" id="requestacallform" method="get" name="requestacallform">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="domein" name="name" placeholder="domein" type="text">
            </div>
        </div><input class="btn btn-blue submit" type="submit" value="Aanmelden">
        <p class="response"></p>
    </form>
</div>

这是我创建弹出窗口 (main.js) 的 JavaScript 文件

$('#popover').popover({
    html: true,
    content: function() {
        return $("#popover-content").html();
    }
});

这就是我在另一个 JavaScript 文件中执行 preventDefault() 的地方

$(".checkform").submit(function(e) {
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
        // AJAX content here
    });
});

为什么preventDefault() 不起作用？

【问题讨论】：

可能是因为脚本加载时.checkform不在DOM中（.submit的函数）。你可以使用$(document).on('submit', '.checkform', function(e)...
Prevent Default on Form Submit jQuery的可能重复
How to prevent form from submitting when within bootstrap popover?的可能重复

标签： javascript jquery html forms twitter-bootstrap

【解决方案1】：

您正在尝试在将 .checkform 添加到 DOM 之前为其附加事件处理程序。您需要在加载内容 html 或全局附加事件后加载第二个 javascript 文件：

$("body").on("submit",".checkform", function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

您可以阅读更多关于动态 html 上的事件绑定here

【讨论】：

【解决方案2】：

请这样尝试：

$(document).on('submit', '.checkform', function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

弹出框可能没有在页面加载时加载，而是在需要时生成，因此您需要文档选择器。

【讨论】：

【解决方案3】：

因为每当打开弹出框时，都会动态创建一个新的 dom 片段，您可以利用它来附加事件或根据需要操作 html 本身。

来自bootstrap popover docs你需要监听这个事件：

inserted.bs.popover：该事件在 show.bs.popover 事件之后，当 popover 模板被添加到 DOM 时触发。

所以，我的建议是避免事件委托并将事件直接附加到正确的元素：

$(function () {
  // open the popover on click
  $('#popover').popover({
    html: true,
    content: function () {
      return $("#popover-content").html();
    }
  });
  
  // when the popover template has been added to the DOM
  // find the correct element and attach the event handler
  // because the popover template is removed on close
  // it's useless to remove the event with .off('submit')
  $('#popover').on('inserted.bs.popover', function(e){
    
    
    $(this).next('.popover').find('.checkform').on('submit', function(e){
      e.preventDefault();
      var request = $("#domein").val();
      
      // do your stuff

      $('#popover').trigger('click');
    });
  
  
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
<button type="button" class="btn btn-default popover-content" role="button" id="popover">
    Click to open Popover
</button>
<div id="popover-content" class="hidden">
    <form action="z.html" id="requestacallform" method="GET" name="requestacallform" class="checkform">
        <div class="form-group">
            <div class="input-group">
                <input id="domein" type="text" class="form-control" placeholder="domein" name="name"/>
            </div>
        </div>
        <input type="submit" value="Aanmelden" class="btn btn-blue submit"/>

        <p class="response"></p>
    </form>
</div>

【讨论】：

【解决方案4】：

感谢您的回复，我正在使用 Meteor 并且遇到了同样的问题。我像这样使用@Marcel Wasilewski 的回复...

Template.voteContest.onRendered(function() {

$(document).on('submit', '.keep-vote', function(event){
    // Prevent default browser form submit
    event.preventDefault();

    // Clear all popovers
    $("[data-toggle='tooltip']").popover('hide');
});

});

【讨论】：