События кликов в диалоге jQuery происходят дважды?

Question

Я имел дело со странной проблемой, что события .click() происходят дважды, когда они помещаются в диалог jQuery.

Мой простой тестовый пример приведен ниже, а живой пример здесь

  <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>, который регистрирует событие click, за пределы popup div, я думаю, что JS анализируется в другой раз, когда div становится видимым ...

Answer 2

Наиболее распространенная причина, по которой это происходит, заключается в том, что ваш скрипт анализируется 2 раза.Если вы не уверены, где это происходит или у вас нет времени на отладку, вот простой обходной путь.

Идея состоит в том, чтобы удалить все активные хэдлеры, прежде чем применять новый хэдлер.1005 * Если вы используете jQuery 1.7 или выше, вы можете использовать следующий синтаксис.

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