Get DOM on ajaxComplete

user_13235866 0
Viewed 61

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

ajax javascript
1 Answers

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

user_2685980
Related