4

I have the following HTML. I have provided it only to provide context, and it doesn't need to be reviewed in detail.

When clicking a a.displayDetail which is dynamically generated, dialog2 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.

How can I find all event handlers tied to a dynamically generated element?

I have read related posts such as the following, but they don't seem to apply to dynamically generated elements.

Thank you

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <button id="start">start</button>
        <div id="dialog1">
            <ol id="ol"></ol>
        </div>
        <div id="dialog2"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script src="clicks.js" type="text/javascript"></script>
    </body> 
</html>

clicks.js

$(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 < json.length; i++) {
                    ol.append($('<li />',{'data-id': json[i].id, 'class':'myclass', html:'<p class="message">'+json[i].html+'</p>'}));
                }
                },'json');
        }
    });

    $("#ol").on("click", "a.displayDetail", function(){$("#dialog2").dialog("open");});
    $("#dialog2").dialog({
        autoOpen    : false,
        modal       : true,
        open        : function() {
            $(this).html('<p>Hello</p>');
            alert('pause');
        }
    });
});

ajax.php

<?php
header('Content-Type: application/json;');
$array=array(
    array('id'=>1,'html'=>'first <a href="#" class="displayDetail">click me</a> bla bla bla'),
    array('id'=>2,'html'=>'second <a href="#" class="displayDetail">click me</a> bla bla bla')
);
echo json_encode($array);
?>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1032531
  • 24,767
  • 68
  • 217
  • 387

1 Answers1

1

You can use following logic to get all delegated events bound using jQuery, iterating throught all ancestor elements:

$.fn.reverse = [].reverse;
var $elem = $('#test');
var $parents = $elem.add($elem.parents().add(document).reverse());

$.each($parents, function (i, _elem) {
    var events = $._data(_elem, "events");
    if (events) {
        $.each(events, function (type, definition) {
            $.each(definition, function (index, event) {
                if (_elem != $elem[0] && !$elem.is(event.selector)) return;
                console.log(type, _elem);

            })
        })
    }
});

-jsFiddle-

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • Thank you A. Wolff, Your script is a bit beyond my level, and am spending some time going over it. Mind letting me know what `$.fn.reverse = [].reverse;` and `var $parents = $elem.add($elem.parents().add(document).reverse());` is doing? The rest makes sense. Also, how could this be utilized say in my `get` callback on the added `` elements? – user1032531 Feb 08 '15 at 14:28
  • Thanks again. Was able to incorporate your script (even though I don't totally understand it), and see there is only one event tied to the problem element (I think). Still don't understand `$parents = $elem.add($elem.parents().add(document).reverse());`, and hope I am not missing other events. – user1032531 Feb 08 '15 at 15:02