如何选择一个窗体标签内的按钮与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？

回答

相关问题