NateH06 NateH06 -3 years ago 100
Ajax Question

Retrieve an element after a document.on(...) call

I'm attempting to work with a

document.on()
method, and I need access to the selector element, but it doesn't seem to want to grab the one I intend.

In my HTML, I have this:

<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>


And in my main.js file, located externally, I have this AJAX call to grab a dynamically loaded page from the server:

$(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();
});


Here's the expanded console output:

[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


However, in my console, it's telling my that
urlToPass
is undefined, as it cannot grab the url out of the
targetarea
var. It seems to only define targetarea as a prevObject. How can I grab the url value from the which follows from the targeted element in the original
click
listener?

Answer Source

next() selects siblings. The i is a child of the td, not a sibling. Try find() or .children() instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download