Detect ul list content change jQuery

Question

We have an unordered list with id #some-list. In our Backbone implementation, when certain data is returned, list entries are rendered and appended to the list and the list is displayed.

We want to detect when such change is completed using JQuery. We used $(#some-list).ready() and $(#some-list).load() , but it looks like they are not working.

What are some ways to capture such change? Could anyone shed some lights here?

Answer 1

Well you didn't post any code so it's really hard to see guess where you fail.
But in general what i would do is trigger a custom event on the ajax callback (you do use ajax to get the content and appending it to the list right?).

for example:

loadData(){
  // invoke the ajax request
  var def = $.get(...);
  def.then(function(result){
    // $(#ul) append(result) ...  
    // now trigger the custom event  
    $(document).trigger('listRendred');
  });
}

Now on a different place or script you can listen to it:

$(document).on('listRendred', function(e){ // do what ever... })

Answer 2

Since you are using BackboneJS you could try to listen to its events.

To find out which events you could use, try following code (replace my * placeholders first) and have a look inside your browser's console.

*backboneobject*.on("all", function(e) {
  console.log(e)
});

Afterwards just listen for the event by using

*backboneobject*.on("*yourevent*", function() {
  doStuff();
});