preventdefault表单提交不工作在自举popover

我有一个内部形式的引导popover元素。preventdefault表单提交不工作在自举popover

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

当我不使用popover和一个模式，而是它完美的作品。

这里是我的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(); 
    } 
});

而这正是我做我的preventDefault()在其他JavaScript文件

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

为什么preventDefault()不起作用？

来源

2016-08-22 Frank Lucas

这可能是因为'.checkform'是不是在DOM加载脚本时（该函数'.submit'）。你可以使用$（document）.on（'submit'，'.checkform'，function（e）...' –

[Prevent Default on Form Submit jQuery]（http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery） – Cruiser

[如何防止窗体在引导弹出窗口时提交？]（http：// stackoverflow。COM /问题/ 23092499 /如何对防止形式从 - 提交 - 当 - 内 - 引导 - 酥料饼？RQ = 1） –

在将其添加到DOM之前，您正在尝试追加.checkform的事件处理程序。你需要globaly加载第二javascript文件加载内容的HTML之后或追加事件：

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

你可以阅读更多有关事件的动态HTMLS结合here

来源

2016-08-22 13:26:09 Gvidas

尝试像这样请：

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

弹出窗口可能并未在页面加载时加载，而是在需要时才生成，因此您需要文档选择器。

来源

2016-08-22 13:29:09

因为无论何时打开弹出窗口，都会立即创建新的dom片段，因此您可以利用它来附加事件或根据需要操作html本身。

从bootstrap popover docs你要听此事件：

inserted.bs.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>

来源

2016-08-22 13:54:52 gaetanoM

感谢您的答复，我是用流星和有一样的问题。我用像这样@Marcel斯基的回应......

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

});

来源

2016-09-08 18:27:02 Cyrois

preventdefault表单提交不工作在自举popover

回答

相关问题