如何選擇一個窗體標籤內的按鈕與JavaScript？

我正在嘗試使用bootbox插件提交表單時彈出確認消息。問題是我不知道如何選擇表單標籤中的按鈕。在下面的示例中，確認消息對於表單標籤外的按鈕有效，但對於內部的按鈕不起作用。如何選擇包裹在表單標籤內的按鈕？如何選擇一個窗體標籤內的按鈕與JavaScript？

<div class="bs-example"> 
<div class="col-md-4 col-md-offset-4"> 
<form action="#" method="POST"> 
    <div class="form-group"> 
     <input type="username" class="form-control" id="inputEmail" placeholder="Username"> 
    </div> 
    <div class="form-group"> 
     <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="inputPassword" placeholder="Repeat password"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox"> Remember me</label> 
    </div> 
      <button class='btn btn-signup btn-signup-sm' type="submit">Sign up</button> 
</form> 
</div> 
</div> 

<button class='btn btn-signup btn-signup-sm' type="submit">Sign up</button> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.btn').on('click', function(){ 
    bootbox.alert("hello there"); 
}); 
}); 
</script

來源

2014-09-25 Stijn

'$（」形式.btn'）'？ – 2014-09-25 15:09:33

問題不是，兩個按鈕都沒有onclick處理程序，而是提交表單，並重新加載頁面。 – Teemu 2014-09-25 15:15:38

更改JavaScript代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.btn').on('click', function(e){ 
    e.preventDefault();   // this line is key to preventing page reload 
           // when user clicks submit button inside form 
    bootbox.alert("hello there"); 
}); 
}); 
</script>

來源

2014-09-25 15:25:51 ray9209

你爲什麼不趕上表格的提交事件？

讓表單像"<form method="POST" id="my_form">...</form>"

，並使用一個ID：

$('#my_form').submit(function(){ 
    bootbox.alert("hello there"); 
});

看看你fiddle here!

來源

2014-09-25 15:11:41

如何選擇一個窗體標籤內的按鈕與JavaScript？

回答

相關問題