如何檢測jQuery中何時調用.html（）函數？

問題很簡單。我有一個巨大的JavaScript應用程序。而且有很多的應用程序的時間，我使用的代碼看起來是這樣的 -如何檢測jQuery中何時調用.html（）函數？

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

所以我想要做的是，每次這個網站（）函數被調用我想執行的一組函數。

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

我該怎麼做？謝謝。

來源

2013-10-21 Sai Krishna

從AJAX成功處理程序明確調用您的函數是不是更清潔？您也可以嘗試使用全局['ajaxComplete']（http://api.jquery.com/ajaxComplete/）事件來後處理AJAX響應，但我不知道在特定的AJAX之前或之後是否調用了該事件響應處理程序。 – millimoose

將'html（'）'包裝在你自己的函數中，它也調用這些方法。 –

當調用html()時，它通常會使DOM對象發生更改，因此您可以查找DOM更改事件處理程序，只要您的主頁面的HTML發生更改就會調用它。我發現

Is there a JavaScript/jQuery DOM change listener?

如果這助您的事業。

來源

2013-10-21 12:24:41

DOM更改適用於所有意圖和目的不可用。舊的API已棄用，而新的API在IE中不受支持。 – millimoose

您可以使用自定義事件處理程序爲：

$('#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

基於答案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(); 
});

易於維護並根據您的要求減少代碼。

來源

2013-10-21 12:26:00

這可能是最好的主意，它是乾淨的和分離的。 – millimoose

@palash，他是否需要爲每個正在發生的'.html（）'函數進行自定義調用？這不是很長嗎？ – Manoj

請注意，我有一個大規模的JavaScript應用程序，我不能繞過改變這樣的代碼。如果我必須回滾更改，該怎麼辦？它會變得非常混亂。謝謝。 –

可以覆蓋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); 
};

來源

2013-10-21 12:37:52 Sjerdo

你可以用自己的函數替換HTML功能，然後調用函數html：

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

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

來源

2013-10-21 12:39:05 edotassi

我有一個小腳本給你。插入到你的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。

插件沒有完全發短信，一些錯誤可能在這裏，但對於您的HTML，它的工作。

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

來源

2013-10-21 12:44:09

如何檢測jQuery中何時調用.html（）函數？

回答

相關問題