Question

我有以下HTML。我提供它只是为了提供上下文，不需要详细审查。

点击动态生成的a.displayDetail时，dialog2会按预期弹出。但对于我的实际应用程序，它会继续重定向到另一个页面。显然，我的实际应用程序还有一些与元素绑定的事件。

如何找到与动态生成的元素绑定的所有事件处理程序？

我已阅读以下相关帖子，但它们似乎不适用于动态生成的元素。

谢谢

<!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);
?>

Answer 1

您可以使用以下逻辑来使用jQuery绑定所有委托事件，迭代所有祖先元素：

$.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);

            })
        })
    }
});

显示绑定到动态生成元素的所有事件处理程序？

1 个答案:

-jsFiddle-