Is there any way to get updated DOM on ajaxComplete. I am able to get and modify responseJSON, responseText, etc. but I do not want to mess with text and searching for the right element.
$(document).ajaxComplete((event, xhr) => {
let y = $('a')[0].getElementsByClassName('b')[0];
y.onclick = (event2) => {
console.log(event2);
return false;
};
}
When I am doing like above, it is not attaching the event to the new retrieved DOM element, but the old one I guess.
I want attach the event to new retrieved DOM element.
EDIT:
I have tried using this, event object and $ but all these variables are related to 'old' DOM
It seems like you are using jQuery. jQuery has a sophisticated ajax helper.
$.ajax({
url : "/api/get/user" // User Ajax endpoint,
method : "GET", // your Ajax method . post, get put
data : // data you want to sent to the backend
}).fail(function() {
// If Ajax failed then do this
}).done(function(data) {
// If Ajax success then do this
});
In the user case what I do, I will call my functions ( in your case ajaxComplete maybe ) inside .done()
and I will replace
let y = $('a')[0].getElementsByClassName('b')[0];
by
let y = $('a').find('b'); // or dynamic class or id
code pen : https://codepen.io/umanda/pen/abwboqp