在 Bootstrap 模式中单击按钮时调用 JS 函数

Posted 2023-02-24

【中文标题】在 Bootstrap 模式中单击按钮时调用 JS 函数

【英文标题】：Call JS function on click of a button in a Bootstrap modal

【发布时间】：2022-01-16 21:42:08

【问题描述】：

我有一个引导模式，其中我有几个按钮来捕捉反馈。

我想在点击其中一个按钮时调用一个 JS 函数。

但是，单击按钮时，模式只是关闭而不调用 JS 函数。

但是，如果我对不在模式中的任何其他元素执行相同的 onclick 事件，它就可以正常工作。

js

<script>
          
   function sayHello() 
        alert("Demo Alert")
   
</script>

HTML

<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
  class="modal-dialog modal-lg modal-dialog-centered"
  role="document"
>
  <div class="appie-signup-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="appie-signup-box">
            <h3 class="title">How was the Session?</h3>
            <form action="#" id="mood-tracker">
              <div class="row">
                  <div class="input-box">
                    <button type="submit" value="Good" onclick="sayHello()">
                      <i
                        class="fa fa-smile"
                       
                      ></i
                      >Good
                    </button>
                  </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

我哪里出错了？

【问题讨论】：

您必须将按钮类型更改为“按钮”而不是“提交”

【参考方案1】：

请不要使用按钮类型“提交”。使用类型“按钮”而不是这样：

<button type="button" value="Good" onclick="sayHello()"><i class="fa fa-smile"></i>Good </button>

【参考方案2】：

C必须是大写

使用 onClick 而不是 onclick

<button type="button" onClick="sayHello()">Button</button>

【参考方案3】：

我认为你应该使用window.confirm() 而不是window.alert()。

html

<button type="submit" value="Good" onclick="sayHello()">

JS

function sayHello() 
   return confirm('Demo Alert');

我在另一个 Stack Overflow 页面上找到了这个答案：HTML - How to do a Confirmation popup to a Submit button and then send the request?