javascript - 如何检测 .html() 函数在 jQuery 中被调用？

Question

问题很简单。我有一个庞大的 JavaScript 应用程序。在应用程序中，我很多次使用看起来像这样的代码 -

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

所以我想做的是，每次调用这个 html() 函数时我都想执行一组函数。

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

我该怎么做？谢谢。

Answer 1

您可以使用自定义事件处理程序:

$('#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!');
});

更新

基于答案over here通过一些修改，您可以执行以下操作:

// 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();
});

根据您的要求易于维护且代码较少。