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

根据您的要求轻松维护和减少代码。

Answer 2

您可以覆盖jQuery.fn.html（）方法，如Override jQuery functions

中所述

例如，使用此：

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

Answer 3

当调用html()时，它通常会使DOM对象发生变化，因此您可以查找DOM更改事件处理程序，只要您的主页HTML更改，就会调用它。我找到了

Is there a JavaScript/jQuery DOM change listener?

如果这有助于你的事业。

Answer 4

您可以使用自己的函数替换html函数，然后调用函数html：

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

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

Answer 5

我有一个小脚本给你。将其插入您的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
            }
        }
    })
}

这允许您“挂钩”jQuery函数并在调用时触发事件。

在这里你如何使用它，首先绑定你想要触发的函数。在您的情况下，它将是.html()：

$.hook('html');

然后使用.on添加事件监听器。它没有动态添加的元素，你可以使用直接绑定，否则委托evets工作：

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

每次#threat, #cool or #not_cool呼叫.html时，该功能都会启动。

$.hook插件未完全发短信，可能会出现一些错误，但对于您的HTML，它可以正常工作。

示例：http://jsfiddle.net/5svVQ/

如何检测jQuery中何时调用.html（）函数？

5 个答案: