2

ready()すべての新しいリクエストに対して正常に機能するjQuery関数にいくつかの標準プラグインバインディングがあります。現在、アプリに ajax をどんどん追加しているため、これらの新しい要素は最初のバインディングから取り残されています。

ルールの例:

$(function () {
    $('.date').datepicker({ showOn: 'button', buttonImage: "cal.gif" })
               .blur(function (e) {
                   $(this).val(formatFecha($(this).val()));
               })
    $('.ui-datepicker-trigger').attr("tabindex", "-1");
    $(".decimalnumber").numpadDecSeparator({ separator: "," })
                   .numeric(",")
                   .focus(function () { if ($(this).val() == '0,00' || $(this).val() == '0') $(this).val(''); });
    $(".integernumber").numeric().focus(function () { if ($(this).val() == '0') $(this).val(''); });
    $(".spinner").spinner({ min: 0, max: 10000000 });
    $(".jbtn").button();

    .......

これはイベントではないため、イベントをバインドする機能については話していません。live()

これはかなり一般的だと思うので、皆さんはどうやってやっているのだろうと思います。

4

4 に答える 4

5

これらの関数を独自の別の関数に配置します。THAT 関数を呼び出してdocument.ready、その他のリロードが必要なときはいつでも呼び出します。

function initialize() {
    // do stuff;
}

$(document).ready(function() {
    initialize();
});

$.ajax({
    // url, data, etc.
    success: function() {
        initialize();
    }
});

destroyDOM を変更するスライドショーなどの一部のプラグインでは、再初期化する前にメソッドまたはオプションを呼び出す必要がある場合があることに注意してください。

于 2012-12-19T14:23:52.773 に答える
3

TerrificJSというJavaScriptライブラリを使用しています。これにより、ajaxを使用してhtmlを簡単にロードし、それに伴うjavascriptを時間どおりに初期化できます。しかし、それはそれほど単純ではありません。TerrificJSは命名規則に依存しています。

ajaxが次のhtmlを返すとしましょう：

<div class="mod modMyInteractiveModule">Cool stuff, buttons etc here</div>

次に、 ajaxの成功時に返されたhtmlをスキャンし、cssクラスmodおよびmodXを持つすべての要素を選択するヘルパー関数があります。ヘルパーは、 Xという名前のjavascriptクラスがあるかどうかを確認します。または、上記のMyInteractiveModuleの例をそのまま使用します。

Tc.Module.MyInterActiveModule = function () {
    // Bindings go here
}

TerrificJSを使用して独自のソリューションを実装したくない場合でも、ある程度の光を当てることができれば幸いです。これに対するTerrificJSの例は、http：//terrifically.org/api/sandbox/の[新しいウィジェットを動的に追加]の下にあります。

于 2012-12-19T14:32:01.140 に答える
1

私は@Blazemongerコードの洗練されたバージョンを使用することになりました：

慣例により、新しい要素にクラス名を付ける必要があります。

    function initialize(parent) {
        $(parent + ' .date').datepicker({ showOn: 'button'})
        $(parent + ' .autocomplete').each(function (i, el) {
            addbuttonautocomplete(el);
        });

        ....
        // remove the class to avoid double initialization
        $(".newelements").removeClass('newelements');
    }

    $(document).ready(function() {
        initialize('body');
    });

    $.ajax({
        // url, data, etc.
        success: function() {
            initialize('.newelements');
        }
    });

概念実証：http：//jsbin.com/ireguj

于 2012-12-19T15:02:26.147 に答える
1

init() 関数で指定されたすべてのコードを移動し、何をしようとしているかに応じて、document.ready および ajax の成功/失敗でそれを呼び出します。

于 2012-12-19T14:24:39.283 に答える