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>

在我的main.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 var中获取url。它似乎只将targetarea定义为prevObject。如何从原始click侦听器中的目标元素中获取后面的url值？

Answer 1

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

Answer 2

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

这样的事情：

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

您可以查看JS Fiddle。

在document.on（...）调用之后检索元素

2 个答案: