jQuery 对话框中的单击事件发生两次？答案

【问题标题】：Click events in a jQuery Dialog occur twice?jQuery 对话框中的单击事件发生两次？
【发布时间】：2010-06-29 16:04:45
【问题描述】：

我一直在处理一个奇怪的问题，即.click() 事件在放置在 jQuery 对话框中时会发生两次。

下面是我的简单测试用例和live example is here

  <div id="popup" style="display: none">
    <a href="javascript:void(0);" id="testlink">Test Link</a>
    <script type="text/javascript">
      $('#testlink').click(function(){
        alert("Test Link clicked");
        return 0;
      });
    </script>
  </div>
  <script type="text/javascript">
  $(document).ready(function(){
    $('#popup').css('display','block');
    var h=($(window).height()+0.0)*0.9;
    var w=($(window).width()+0.0)*0.9;
    if(w >= 800){
      w = 800;
    }
    $('#popup').dialog({
      autoOpen: true,
      width: w,
      height: h,
      modal: true,
      open: function(event,ui){
        $('body').css('overflow', 'hidden');
      },
      close: function(event,ui){
        $('body').css('overflow', 'scroll');
      }
    });
  });
  </script>

【问题讨论】：

标签： jquery events jquery-ui dom

【解决方案1】：

将注册点击事件的<script> 块移到popup div 之外，我认为当div 变得可见时，JS 会再次被解析...

【讨论】：

嗯。我没有使用您的超薄样本在本地运行双重调用，但我确实在您的机器上运行的实时样本上得到了它。您的示例网站也有一些额外的东西。

【解决方案2】：

发生这种情况的最常见原因是您的脚本被解析了 2 次。如果您不确定这种情况发生在哪里或没有时间调试，这里有一个简单的解决方法。

这个想法是在应用新的 hadler 之前删除所有活动的 hadler。

$( '.selector' ).unbind( 'click' ).click( function() {
    // your code
});

如果您使用 jQuery 1.7 或更高版本，则可以使用以下语法。

$( '.selector' ).off( 'click' ).on( 'click', function() {
    // your code
});

【讨论】：