在 document.on(..) 调用后检索元素

Question

我正在尝试使用document.on()方法，我需要访问选择器元素，但它似乎不想抓住我想要的那个。

在我的 HTML 中，我有这个：

<td class="dataPickerIconDiv">
<i class="fa fa-arrow-circle-down tableIcon dataPickerIcon" aria-hidden="true"                                   
title="Click to view this table in the Workspace for your project"                                url='/projectworkspace/dataViewer/myRow'></i>
</td>

在我的主.js文件中，位于外部，我有这个 AJAX 调用来从服务器获取动态加载的页面：

$(document).on('click', '.dataPickerIconDiv', function() {
console.log($(this))
var targetArea = $(this).next("i");
console.log(targetArea)
var urlToPass = $(targetArea).attr('url');
console.log("url retrieved: " + urlToPass)
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
$("#projectDataContent").prepend(this.responseText);
}
};
xhttp.open("GET", urlToPass, true);
xhttp.send();
});

下面是扩展的控制台输出：

[td.dataPickerIconDiv]
0 :td.dataPickerIconDiv
length:1
__proto__ : Object(0)
__________________________________ 
[prevObject: jQuery.fn.init(1)]
length:0
prevObject:[td.dataPickerIconDiv]
__proto__ : Object(0)
__________________________________
url retrieved: undefined

但是，在我的控制台中，它告诉我urlToPass是未定义的，因为它无法从targetarea变量中获取 url。它似乎只将目标区域定义为 prevObject。如何从原始click侦听器中的目标元素中获取 url 值？

Answer 1

next()选择兄弟姐妹。i是td的孩子，而不是兄弟姐妹。请尝试find()或.children()。

Answer 2

您可以在父级上调用find()函数，并通过调用attr()函数来检索 url 值。

像这样：

$(document).on('click', '.dataPickerIconDiv', function() {
var urlToPass = $(this).find('i').attr('url');    
console.log("url retrieved: " + urlToPass)
});

你可以检查这个JS小提琴。