Question

我一直处理一个奇怪的问题，.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>

Answer 1

移动在<script> div之外注册click事件的popup块，我认为当div变得可见时，JS会被解析...

Answer 2

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

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

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

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

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

jQuery对话框中的Click事件发生两次？

2 个答案: