Bootstrap 点击按钮事件

Question

这似乎是一个愚蠢的问题，但我刚拿到Bootstrap，网站上没有任何关于如何为按钮添加JavaScript回调函数的示例...

我尝试给我的按钮设置了一个id标识，然后

<div class="btn-group">
  <button id="rectButton" class="btn">Rectangle</button>
  <button class="btn">Circle</button>
  <button class="btn">Triangle</button>
  <button class="btn">Line</button>
  <button class="btn">Curve</button>
  <button class="btn">Pic</button>
  <button class="btn">Text</button>
  <button class="btn">Gradient</button>
</div>

我想为矩形按钮添加回调函数...

$('#rectButton').on('show', function (e) {
    //ACTION
})

我无法理解Bootstrap回调函数的含义。

我在网上找到的所有内容都是针对Rails + Bootstrap的，没有关于仅使用Bootstrap和JS的内容。

- JuanCB

---

请问您能否同时包含按钮的HTML代码？ - surj

Answer 1

JavaScript中没有show事件 - 你需要将按钮绑定到click事件：

$('#id').on('click', function (e) {

     //your awesome code here

})

请注意，如果你的按钮位于一个form标签内，你可能更愿意将整个表单绑定到submit事件。

- moonwave99

---

还是不行...我有一个按钮：<button id="rectButton" class="btn">矩形</button>，它在一个btn-group中，代码是$('#rectButton').on('click', function (e) { // 我的代码 }); - JuanCB

刚刚复制了你最新的代码，这里完美运行。无论如何，Bootstrap只是关于演示，与JS无关[除了一些小的可选插件]。 - moonwave99

对于 Bootstrap 3，我使用了这个 function runWorkflow() {//code} 和 <input type="submit" value="Run Workflow" class="btn btn-success" onclick="runWorkflow()" />。 - Zach M.

@ZachM，请不要使用侵入式的JS - 无论如何，Bootstrap与按钮/表单没有任何交互。 - moonwave99

啊，我明白你的意思了。我正在开发的应用程序是为内部使用而设计的，只是随便提出一个想法，你说得对。 - Zach M.

Answer 2

如果您和我一样在页面上动态创建了按钮，则需要使用以下代码来检测点击事件：

$("#your-bs-button's-id").on("click", function(event) {
                       or
$(".your-bs-button's-class").on("click", function(event) {

这些方法无法生效，因为它们只对当前元素有效（而不是未来的元素）。相反，您需要引用在网页初始加载时存在的父级项目。

$(document).on("click", "#your-bs-button's-id", function(event) {
                       or more generally
$("#pre-existing-element-id").on("click", ".your-bs-button's-class", function(event) {

在 stack overflow 上还有许多关于这个问题的参考 在这里 和 在这里。

- mrduncle1

---

感谢 $(document).on("click 提示，以上示例在未来元素中不起作用。 - leole