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

时间:2018-05-19 06:39:53

标签: javascript twitter-bootstrap-3

我有一个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。

2 个答案:

答案 0 :(得分:2)

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

更改

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

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

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

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

答案 1 :(得分:0)

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