按钮收音机上的 Twitter Bootstrap onclick 事件 [英] Twitter Bootstrap onclick event on buttons-radio

查看:16
本文介绍了按钮收音机上的 Twitter Bootstrap onclick 事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 Twitter Bootstrap 按钮收音机,并将一个 onclick 事件连接到它.但是我如何检查哪些按钮被触发了?

我的第一个想法是简单地检查active"类,但这应该会产生竞争条件(结果取决于是先处理 Twitter Bootstrap 事件还是我自己的 onclick 事件).

解决方案

这真的很烦人.我最终使用的是这个:

首先,创建一组没有data-toggle属性的简单按钮.

<button type="button" class="btn active">Day</button><button type="button" class="btn">周</button><button type="button" class="btn">月</button><button type="button" class="btn">Year</button>

接下来,编写一个事件处理程序,通过激活"单击的按钮并停用"所有其他按钮来模拟单选按钮效果.(从评论中集成了 Nick 的清洁版本.)

$('#selector button').click(function() {$(this).addClass('active').siblings().removeClass('active');//TODO: 在这里插入任何你想用 $(this) 做的事情});

I have a Twitter Bootstrap buttons-radio and hook an onclick event to it. But how do I check which of the buttons that got triggered?

My first thought was to simply check for the class 'active', but this should create a race condition (result depends on whether the Twitter Bootstrap event or my own onclick event is handled first).

解决方案

This is a really annoying one. What I ended up using is this:

First, create a group of simple buttons with no data-toggle attribute.

<div id="selector" class="btn-group">
    <button type="button" class="btn active">Day</button>
    <button type="button" class="btn">Week</button>
    <button type="button" class="btn">Month</button>
    <button type="button" class="btn">Year</button>
</div>

Next, write an event handler that simulates the radio button effect by 'activating' the clicked one and 'deactivating' all other buttons. (EDIT: Integrated Nick's cleaner version from the comments.)

$('#selector button').click(function() {
    $(this).addClass('active').siblings().removeClass('active');

    // TODO: insert whatever you want to do with $(this) here
});

这篇关于按钮收音机上的 Twitter Bootstrap onclick 事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆