0

問題は簡単です。私は大規模な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.
}

どうすればいいですか？ありがとうございました。

4

5 に答える 5

2

そのためにカスタム イベント ハンドラを使用できます。

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

アップデート

ここの回答に基づいて、いくつかの変更を加えて、これを行うことができます：

// 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-21T12:26:00.587 に答える
1

jQuery 関数のオーバーライドで説明されているように、jQuery.fn.html() メソッドを上書きできます。

たとえば、次のように使用します。

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-21T12:37:52.743 に答える
0

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-21T12:39:05.327 に答える
0

ちょっとしたスクリプトがあります。それをあなたの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ます。動的に追加された要素がない場合は、直接バインディングを使用できます。それ以外の場合は、委譲されたイベントが機能します。

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

#threat, #cool or #not_coolこの関数は、 を呼び出すたびに起動し.htmlます。

$.hookプラグインは完全にテキスト化されていません。いくつかのバグがここにある可能性がありますが、HTML では機能します。

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

于 2013-10-21T12:44:09.880 に答える
0

がhtml()呼び出されると、通常は DOM オブジェクトが変更されるため、DOM 変更イベント ハンドラーを探すことができます。これは、メイン ページの HTML が変更されるたびに呼び出されます。見つけた

JavaScript/jQuery DOM 変更リスナーはありますか?

これがあなたの原因に役立つ場合。

于 2013-10-21T12:24:41.073 に答える