时间戳

首页 > 解决方案 > AJAX 调用 - 每次点击闪烁更多

javascript - AJAX 调用 - 每次点击闪烁更多

问题描述

我正在构建一个图表（在 Yii2 框架中），可以显示每个时期的不同报告，如果用户单击带有 7D-1M-1Y 的按钮组，我需要更新图表。

更新工作，但每次我通过单击按钮更改查看周期时，显示右侧图表之前的闪烁时间会变高。

这是我的 JS：

if(!$('#7D').hasClass('active') && !$('#1M').hasClass('active') && !$('#1Y').hasClass('active')) { $('#1M').addClass('active'); }
$('#7D').click(function() {
    var myValue = "7D";
    $.get("",{val:myValue},function(data){
        $('.btn').removeClass('active');
        $('#7D').addClass('active');
        $('#w2').fadeOut('fast', function(){
            $('#w2').html(data).fadeIn('fast');
        });
    });
});
$('#1M').click(function() {
    var myValue = "1M";
    $.get("",{val:myValue},function(data){
        $('.btn').removeClass('active');
        $('#1M').addClass('active');
        $('#w2').fadeOut('fast', function(){
            $('#w2').html(data).fadeIn('fast');
        });
    });
});
$('#1Y').click(function() {
    var myValue = "1Y";
    $.get("",{val:myValue},function(data){
        $('.btn').removeClass('active');
        $('#1Y').addClass('active');
        $('#w2').fadeOut('fast', function(){
            $('#w2').html(data).fadeIn('fast');
        });
    });
});

这是我的按钮组：

<?= ButtonGroup::widget([
    'buttons' => [
        ['label' => '7D', 'id' => '7D'],
        ['label' => '1M', 'id' => '1M'],
        ['label' => '1Y', 'id' => '1Y'],
    ],
]); ?>

提示：我尝试使用body而不是#w2（图表的id），它可以正常工作而不会增加闪烁时间，但垂直闪烁一次，当图表消失时页面转到顶部然后返回新底部。

解决这个也有帮助，我只需要一个解决方案，如何解决并不重要

标签： javascriptjqueryajax

解决方案

根据您的问题，我认为您的点击事件已多次附加到您的元素。为避免多次附加它们，您可以使用

$("#SomeId").off("click").on("click", function({
    // Your logic here.
}));

尽管问题上的问题尚不清楚。

推荐阅读