jQuery: Replacing .livequery() with on()

Question

I have the following jQuery/LiveQuery code.

It waits until a class of "highlight_this" appears somewhere on the page, then it highlights a table row in order to bring attention to the row of data that has just been changed.

So the user selects to edit a row of data, we update the db via ajax and the changed row is written back to the page with .highlight_this applied to the <tr>.

I'm using jQuery 1.11.1 as I still have to support IE7. The below works fine in Firefox, but in IE7/8/9 it doesn't fire until the mouse has been clicked on the page so I'm guessing I need to stop using LiveQuery and switch to .on().

// waits for the tr.highlight_this to appear, highlights th/td within, then returns to previous colour
//---------------------------------------------
$('.highlight_this', 'table').livequery(
    function() {
        var color = $('td', $(this)).css('background-color');
        $('th, td', $(this)).animate({ backgroundColor: '#ffffcc' }, 0 ).delay(1000).animate({ backgroundColor: color }, 5000, function(){ $(this).removeClass('highlight_this'); $(this).removeAttr('style'); })
});

How do I replicate this behaviour using .on()? I can't seem to figure out how to use .on() in this way.

Kind Regards, Bradley

You might be looking for DOMNodeInsertedIntoDocument Event, see [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) — Jakub Kotrs, Aug 20 '14 at 16:34

score 0 · Answer 1 · edited May 23 '17 at 10:27

Try this -:

 $(document).on("visible", "[class*='.highlight_this, table']", function() {
     var color = $('td', $(this)).css('background-color');
     $('th, td', $(this)).animate({
         backgroundColor: '#ffffcc'
     }, 0).delay(1000).animate({
         backgroundColor: color
     }, 5000, function() {
         $(this).removeClass('highlight_this');
         $(this).removeAttr('style');
     })
 });

Source -: https://stackoverflow.com/a/11701445/6590082

jQuery: Replacing .livequery() with on()

1 Answers1