Click events in a jQuery Dialog occur twice?

Question

I have been dealing with an odd problem that .click() events happen twice whenever placed in a jQuery Dialog.

My simple test case is below and a 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>

Mike Gleason jr Couturier · Accepted Answer · 2010-06-29 16:09:05Z

7

Move the <script> block that registers the click event outside of the popup div, I think the JS gets parsed another time when the div becomes visible...

answered Jun 29, 2010 at 16:09

Mike Gleason jr Couturier

9,2064 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

a7drew Over a year ago

Huh. I didn't get the double call running locally with your slim sample, but I did get it on your live sample running on your machine. Your sample site has some extra stuff going on too.

Arsen Kazydub · Accepted Answer · 2014-08-07 09:09:12Z

2

The most common reason, why this happens, is that your script is parsed 2 times. If you are not sure, where this happens or have no time to debug, here's a simple workaround.

The idea is to remove all active hadlers, before a new hadler is applied.

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

If you use jQuery 1.7 or above, you can use the following syntax.

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

answered Aug 7, 2014 at 9:09

Arsen Kazydub

5,6607 gold badges40 silver badges51 bronze badges

Collectives™ on Stack Overflow

Click events in a jQuery Dialog occur twice?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related