Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Click events in a jQuery Dialog occur twice?

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>
like image 660
Earlz Avatar asked Jun 29 '10 16:06

Earlz


People also ask

How to run the code on double click event in jQuery?

To run the code on double clicked we use dblclick () method. This method is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked. Parameter: It accepts an optional parameter “args” which specifies a function that do a specific task after double clicking.

What is a click event in JavaScript?

The click event occurs when an element is clicked. The click () method triggers the click event, or attaches a function to run when a click event occurs. Optional.

What is the use of jQuery event method?

Commonly Used jQuery Event Methods $(document).ready() The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter. click() The click() method attaches an event handler function to an HTML element.

How do I trigger a click event?

alert ("The paragraph was clicked."); The click event occurs when an element is clicked. The click () method triggers the click event, or attaches a function to run when a click event occurs.


1 Answers

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...

like image 119
Mike Gleason jr Couturier Avatar answered Sep 21 '22 13:09

Mike Gleason jr Couturier