Bootstrap onClick按钮事件

时间:2012-08-22 21:25:45

标签: javascript javascript-events

这似乎是一个愚蠢的问题,但只是得到了引导程序,并没有在网站上提供关于向按钮添加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>

我想在Rectangle按钮中添加一个回调...

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

无法获得引导回调的重点。

我在Web上找到的所有内容都面向Rails + Bootstrap ...没有bootstrap和JS。

2 个答案:

答案 0 :(得分:48)

js中没有show个事件 - 您需要将按钮绑定到click事件:

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

     //your awesome code here

})

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

答案 1 :(得分:0)

如果您像我一样在页面上动态创建了按钮,则

$("#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) {

关于堆栈溢出herehere的这个问题,还有许多其他参考。