CODEWITHSUNDEEP
javascriptjquery
Sai Krishna
Sai Krishna

Reputation: 8187

How to detect when an .html() function is called in jQuery?

The problem is simple. I have a massive javascript application. And there are lot of times in the app where I use code which looks something like this -

$('#treat').html(new_data);
....
....
$('#cool').html(some_html_data);
....
....
$('#not_cool').html(ajax_data);

So what I want to do is, everytime this html() function is called I want to execute a set of functions.

function do_these_things_every_time_data_is_loaded_into_a_div()   
{      
     $('select').customSelect();
     $('input').changeStyle();
     etc.
}

How do I do this? Thank you.

Upvotes: 0

Views: 1609

Answers (5)

palaѕн
palaѕн

Reputation: 73906

You can use the custom event handlers for that:

$('#treat').html(new_data);

// Trigger the custom event after html change
$('#treat').trigger('custom');

// Custom event handler
$('#treat').on('custom', function( event) {
  // do_these_things_every_time_data_is_loaded_into_a_div
  alert('Html had changed!');
});

UPDATE

Based on answer over here and with some modifications you can do this:

// create a reference to the old `.html()` function
$.fn.htmlOriginal = $.fn.html;

// redefine the `.html()` function to accept a callback
$.fn.html = function (html, callback) {
    // run the old `.html()` function with the first parameter
    this.htmlOriginal(html);
    // run the callback (if it is defined)
    if (typeof callback == "function") {
        callback();
    }
}

$("#treat").html(new_data, function () {
    do_these_things_every_time_data_is_loaded_into_a_div();
});

$("#cool").html(new_data, function () {
    do_these_things_every_time_data_is_loaded_into_a_div();
});

Easily maintainable and less code as per your requirements.

Upvotes: 2

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

I have a little script for you. Insert that into your javascript:

//@Author Karl-André Gagnon
$.hook = function(){
    $.each(arguments, function(){
        var fn = this
        if(!$.fn['hooked'+fn]){
            $.fn['hooked'+fn] = $.fn[fn];
            $.fn[fn] = function(){
                var r = $.fn['hooked'+fn].apply(this, arguments);
                $(this).trigger(fn, arguments);
                return r
            }
        }
    })
}

This allow you to "hook" jQuery function and trigger an event when you call it.

Here how you use it, you first bind the function you want to trigger. In your case, it will be .html():

$.hook('html');

Then you add an event listener with .on. It there is no dynamicly added element, you can use direct binding, else, delegated evets work :

$(document).on('html', '#threat, #cool, #not_cool',function(){
    alert('B');
})

The function will launch everytime #threat, #cool or #not_cool are calling .html.

The $.hook plugin is not fully texted, some bug may be here but for your HTML, it work.

Example : http://jsfiddle.net/5svVQ/

Upvotes: 0

edotassi
edotassi

Reputation: 476

You can replace the html function with your own function and then call the function html:

$.fn.html = (function(oldHtml) {
        var _oldHtml = oldHtml;

        return function(param) {
            // your code
            alert(param);
            return _oldHtml.apply(this, [param]);
        };
    })($.fn.html);

Upvotes: 0

Sjerdo
Sjerdo

Reputation: 187

You can overwrite the jQuery.fn.html() method, as described in Override jQuery functions

For example, use this:

var oHtml = jQuery.fn.html;
jQuery.fn.html = function(value) {
    if(typeof value !== "undefined")
    {
        jQuery('select').customSelect();
        jQuery('input').changeStyle();
    }
    // Now go back to jQuery's original html()
    return oHtml.apply(this, value);
};

Upvotes: 1

Sumit Gupta
Sumit Gupta

Reputation: 2192

When html() is called it usually make the DOM object changes, so you can look for DOM change event handler, it is called whenever your HTML of main page change. I found

Is there a JavaScript/jQuery DOM change listener?

if this help your cause.

Upvotes: 0

Related Questions