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

回答

相關問題