title: Display all event handlers tied to a dynamically generated element?
body: <p>I have the following HTML.  I have provided it only to provide context, and it doesn't need to be reviewed in detail.</p>
  
  <p>When clicking a <code>a.displayDetail</code> which is dynamically generated, <code>dialog2</code> pops up as expected.  But for my actual application, it then proceeds to redirected to another page. Obviously, my actual application has some other event tied to the element.</p>
  
  <p>How can I find all event handlers tied to a dynamically generated element?</p>
  
  <p>I have read related posts such as the following, but they don't seem to apply to dynamically generated elements.</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery">Can I find events bound on an element with jQuery?</a></li>
  <li><a href="https://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object">jQuery find events handlers registered with an object</a></li>
  </ul>
  
  <p>Thank you</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Testing&lt;/title&gt;  
          &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;button id="start"&gt;start&lt;/button&gt;
          &lt;div id="dialog1"&gt;
              &lt;ol id="ol"&gt;&lt;/ol&gt;
          &lt;/div&gt;
          &lt;div id="dialog2"&gt;&lt;/div&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="clicks.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>clicks.js</p>
  
  <pre><code>$(function(){
      $('#start').click(function(){$("#dialog1").dialog("open");});
      $("#dialog1").dialog({
          autoOpen    : false,
          modal       : true,
          open        : function() {
              $.get('ajax.php',function (json) {
                  var ol=$('#ol').empty();
                  for (var i = 0; i &lt; json.length; i++) {
                      ol.append($('&lt;li /&gt;',{'data-id': json[i].id, 'class':'myclass', html:'&lt;p class="message"&gt;'+json[i].html+'&lt;/p&gt;'}));
                  }
                  },'json');
          }
      });
  
      $("#ol").on("click", "a.displayDetail", function(){$("#dialog2").dialog("open");});
      $("#dialog2").dialog({
          autoOpen    : false,
          modal       : true,
          open        : function() {
              $(this).html('&lt;p&gt;Hello&lt;/p&gt;');
              alert('pause');
          }
      });
  });
  </code></pre>
  
  <p>ajax.php</p>
  
  <pre><code>&lt;?php
  header('Content-Type: application/json;');
  $array=array(
      array('id'=&gt;1,'html'=&gt;'first &lt;a href="#" class="displayDetail"&gt;click me&lt;/a&gt; bla bla bla'),
      array('id'=&gt;2,'html'=&gt;'second &lt;a href="#" class="displayDetail"&gt;click me&lt;/a&gt; bla bla bla')
  );
  echo json_encode($array);
  ?&gt;
  </code></pre>