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

Question

我正在构建一个图表(在 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)，它可以正常工作而不会增加闪烁时间，但当图表从页面消失时垂直闪烁一次转到顶部，然后返回到新的底部。

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

Answer 1

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

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

虽然提问的问题不清楚。