Bootstrap模态框内显示隐藏上传输入框第二次加载失效求助

我编写了一段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... 
});

请问我遗漏了什么？希望能得到帮助，谢谢。

这个问题的核心是重复绑定事件。每次Bootstrap模态框触发loaded.bs.modal事件时，你都会给.show_hide元素绑定一次新的click事件。第一次打开模态框时，只有1个事件绑定，点击后正常执行slideToggle；但第二次打开时，这个元素上已经叠加了2个click事件，点击一次会连续触发两次slideToggle——第一次显示，第二次立刻隐藏，就出现了你看到的“闪一下又消失”的现象。

这里有两种简单的修复方式，你可以根据自己的场景选择：

方法1：绑定前移除旧事件 #

在每次绑定新的click事件前，先移除该元素上已有的click事件，确保每次模态框加载时只有一个事件绑定：

$('.modal').on('loaded.bs.modal', function (e) { 
  $(".upload_file").hide(); 
  $(".show_hide").show(); 
  // 先移除之前绑定的所有click事件，再重新绑定
  $('.show_hide').off('click').on('click', function(){ 
    $(".upload_file").slideToggle(); 
  }); 
  // jquery validation goes here... 
});

方法2：使用事件委托（更推荐） #

把事件绑定到模态框本身（或者更上层的静态元素），利用事件冒泡机制处理点击。这样只需要绑定一次事件，彻底避免重复绑定的问题，性能也更好：

// 把事件绑定放在模态框事件外面，只执行一次
$('.modal').on('click', '.show_hide', function(){ 
  $(".upload_file").slideToggle(); 
});

$('.modal').on('loaded.bs.modal', function (e) { 
  $(".upload_file").hide(); 
  $(".show_hide").show(); 
  // jquery validation goes here... 
});

方法2的额外优势在于：即使模态框内的.show_hide元素是动态生成的，事件依然能正常触发，而且不需要每次加载模态框都重复绑定事件，代码更简洁高效。

内容的提问来源于stack exchange，提问作者ytse_jam