Question

我有一个JavaScript代码隐藏并使用bootstrap模式中的复选框显示上传输入，它在第一次启动模态时工作，但在第二次打开模态，然后单击复选框以显示上传输入，它显示但随后它会自动隐藏它。

$('.modal').on('loaded.bs.modal', function (e) {        
    $(".upload_file").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(){
        $(".upload_file").slideToggle();    
    });

       //jquery validation goes here...
});

我在这里缺少什么，希望你们能帮忙。 TIA。

Answer 1

您正在创建多个点击事件，每次打开模态时它都会创建一个新事件。

更改

$('.show_hide').click(function(){
    $(".upload_file").slideToggle();    
});

到

$('.show_hide').off('click').on('click', function(){
    $(".upload_file").slideToggle();    
});

这将终止第一次点击事件，然后重新绑定它。

或者，您可以将click事件的绑定移出模态初始化，因此只能调用一次。

Answer 2

$('body').on('click','.show_hide',function(){
    $(".upload_file").slideToggle();    
});

Javascript显示隐藏输入不工作第二次加载bootstrap模式

2 个答案: