Question

我有一个带有表单的bootstrap popover元素。

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

当我不使用popover和modal时，它可以完美地运行。

这是我的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>

这是我的JavaScript文件，我在其中创建了弹出窗口（main.js）

$('#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()无效？

Answer 1

在将.checkform添加到DOM之前，您尝试为$("body").on("submit",".checkform", function(e){ e.preventDefault(); var request = $("#domein").val(); $.ajax({ ... });添加事件处理程序。您需要在加载内容html或附加事件globaly后加载第二个javascript文件：

!^

您可以阅读有关动态htmls here

上的事件绑定的更多信息

Answer 2

请尝试这样：

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

弹出窗口可能没有在页面加载时加载，并且在需要时生成，因此您需要文档选择器。

Answer 3

因为无论何时打开popover，都会动态创建一个新的dom片段，您可以利用它来附加事件或按照您的需要操作html本身。

从bootstrap popover docs你需要听取这个事件：

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

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

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

Answer 4

感谢您的回复，我使用Meteor并遇到了同样的问题。我使用@Marcel Wasilewski的反应就是这样......

socket.on("image", function(image, buffer) {
   if(image){
       // do something with image
   }
});

preventDefault表单提交不在bootstrap popover中工作

4 个答案: