Jquery事件在3次点击后退出

时间:2015-12-07 20:27:38

标签: javascript jquery html ajax

我正在使用小型mvc视图,我希望能够在两个位置之一或两者之间切换数据源(ajax调用控制器)。这一切都很有效,直到我点击了3次不同的切换,然后所有三个切换都没有响应。我尝试过点击和更改活动,结果相同。

页面上唯一的其他项目是左侧导航视图,在切换空闲后仍然有效。

如果我使用切换器离开视图然后返回到它,它们仍然会被打破。如果我重新刷新页面,他们可以再点击3次。

我对此感到茫然,需要一些帮助。有什么想法吗?

我的切换

<div class="btn-group"id="divToggle" data-toggle="buttons">
            <label class="btn blue">
                <input type="radio" value="1"  class="toggle DashToggle"> US06
            </label>
            <label class="btn blue active">
                <input type="radio" value="0"  class="toggle DashToggle"> BOTH
            </label>
            <label class="btn blue">
                <input type="radio" value="2" class="toggle DashToggle"> US05
            </label>

        </div>

我的视图包含5个div块,如下所示

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                <div class="dashboard-stat blue-soft">
                    <div class="visual">
                        <i class="fa fa-car"></i>
                    </div>
                    <div class="details">
                        <div class="number stat_ActiveJits">
                            1349
                        </div>
                        <div class="desc">
                            Active JITS
                        </div>
                    </div>
                    <a class="more" href="javascript:;">
                        View Details <i class="m-icon-swapright m-icon-white"></i>
                    </a>
                </div>
            </div>

我已经为Jquery方面尝试了以下所有示例,并且在3次点击后它们都退出了工作...

$(document).ready(function () {


    $('#divToggle input[type=radio]').change(function () {
        BuildDashBoard(this.value)
    });    
});

$('#divToggle input[type=radio]').live().change(function () {
    BuildDashBoard(this.value)
});

$('.divToggle').on('change', '.DashToggle', (function () {
    BuildDashBoard(this.value)
}));

是的,更改了切换类以匹配这些。

$(".US06_DashToggle").change(function () {
    BuildDashBoard(1)
})
$(".US05_DashToggle").change(function () {
    BuildDashBoard(2)
})
$(".DYNA_DashToggle").change(function () {
    BuildDashBoard(0)
})

最后我的ajax调用工作正常。

function BuildDashBoard(plantid)
{
    var uri = 'http://' + host + '/DashBoard/DashStats';


    $.ajax({
        type: 'POST',
        url: uri,
        data: { PlantId: plantid },
        success: function (d) {

            $('.stat_ActiveJits').text(d.ActiveJits.toString());
            $('.stat_PastDueJits').text(d.PastDueJits.toString());
            $('.stat_ActiveExpedites').text(d.ActiveExpedites.toString());
            $('.stat_PastDueExpedites').text(d.PastDueExpedites.toString());
            $('.stat_ActiveProductionOrders').text(d.ActiveProductionOrders.toString());
            //$.notific8('Application Options Updated', { theme: 'teal', life: 2000, verticalEdge: 'right', horizontalEdge: 'bottom' });
        }

    });
}

1 个答案:

答案 0 :(得分:0)

经过几个小时的斗争,凯文B对需要名字的单选按钮做了一个评论让我重新思考我的CSS。我的css没有正确进行分组,所以一旦我点击一个按钮,它就被检查了,从未取消选中。它没有作为按钮工作的原因,我没有任何线索,我已经搞砸了它。