显示绑定到动态生成元素的所有事件处理程序?
Display all event handlers tied to a dynamically generated element?
我有以下HTML。我提供它只是为了提供上下文,不需要详细审查。
单击动态生成的a.displayDetail
时,按预期弹出dialog2
。但是对于我的实际应用程序,它会继续重定向到另一个页面。显然,我的实际应用程序还有一些其他事件与该元素相关联。
如何找到绑定到动态生成元素的所有事件处理程序?
我已经阅读了如下相关的帖子,但它们似乎不适用于动态生成的元素。
- Can I find events bound on an element with jQuery?
- jQuery find events handlers registered with an object
谢谢
<!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);
?>
您可以使用以下逻辑来获取使用 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);
})
})
}
});
我有以下HTML。我提供它只是为了提供上下文,不需要详细审查。
单击动态生成的a.displayDetail
时,按预期弹出dialog2
。但是对于我的实际应用程序,它会继续重定向到另一个页面。显然,我的实际应用程序还有一些其他事件与该元素相关联。
如何找到绑定到动态生成元素的所有事件处理程序?
我已经阅读了如下相关的帖子,但它们似乎不适用于动态生成的元素。
- Can I find events bound on an element with jQuery?
- jQuery find events handlers registered with an object
谢谢
<!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);
?>
您可以使用以下逻辑来获取使用 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);
})
})
}
});