0

現在、動的に生成された要素にコールバックを割り当てるオブジェクト指向モジュールを作成しています。

function Instant(containerID) {
    this.var1 = 0;
    this.var2 = 0;
    this.containerID = containerID;
    // and more variables...
};

そして、これは動的に生成されるcontainerIDa の id です。次のようなファイルを読み取る Ajax Request を介してこれを設定します。DIVDIV

<!-- content.html -->
<div class="general_container">
    <div class="top_container">
        <!-- plenty of divs, spans etc -->
    </div>

    <div class="tweet_section">
        <!-- plenty of divs, spans etc -->
    </div>
</div>

ここで重要な部分は、次のようにすべてのコールバックを割り当てることです。

Instant.prototype.addCallbacks = function() {
    $(this.containerID + " bar").click(function() {
        $(this.containerID + " bar").foo();
    });

    $(this.containerID + " bar").click(function() {
        $(this.containerID + " bar").foo();
    });

    $(this.containerID+ " bar").click(function(e) {
        $(this.containerID + "bar, " + this.containerID+ " bar").foo();
    });
});


ご覧のとおり、this.containerID各セレクターの前にイベントを割り当てる必要があります。(したがって、1 つの要素のみを選択していることを確認します) s がたくさんあるので、コードは雑然としていますthis.containerID。コードを簡単にするためのよりスマートな方法があるかどうかはわかりません。どんな助けでも大歓迎です。

サンプルJSFiddleを次に示します。

これは私の実際のモジュールではないことに注意してください。明確にするために作成しただけです!

4

4 に答える 4

1

その場合、ID を使用するべきではありません。代わりにクラスを使用する必要があります。

コードを編集するには時間がかかりますが、ヒントは次のとおりです。親にハンドラーを追加します。のようなイベント委任を使用します.on()。次に、現在または将来のすべての子供たちに耳を傾けます。

于 2013-04-09T12:08:06.880 に答える
0

別の Java スクリプト ファイルを作成し、そこにコールバック関数を追加して、containerID を渡すだけです。そうすれば、後で再利用できます。ただし、追加、減算、保存などを行うためにconterIDが必要になるため、conterIDを取り除くことはできないようです..

上記のように表示されている現在のファイルで、

Instant.prototype.addCallbacks = createAddCallbacks(this.ContainerID);

addCallbacks.js を作成する

function createAddCallbacks(containerId)
{
Instant.prototype.addCallbacks = function() {
    $(containerId + " bar").click(function() {
        $(containerId + " bar").foo();
    });

    $(containerId + " bar").click(function() {
        $(containerId + " bar").foo();
    });

    $(containerId+ " bar").click(function(e) {
        $(containerId + "bar, " + containerIdD+ " bar").foo();
    });
});
}
于 2013-04-09T12:16:10.223 に答える
0

@JosephTheDreamer が言ったように、Event Delegationを使用します。( Jquery.fn.on) イベント委任を使用して、1 つのハンドラーを複数のターゲットに設定します。これは、メモリ内のハンドラーが 1 つだけで、動的イベント ハンドラーが設定されていることを意味します。

コードを変更するデモンストレーションを作成しました。見てください...

Instant.prototype.addCallbacks = function () {
    var selfContainer = null, // DOMElement container
        me = this; // Object reference

    $('body').on("click", ".selection_container .btn-add", function () { //Using event delegation
        selfContainer = $(this).parents(".general_container"); //set DOMElement
        selfContainer.find("input[name=currentValue]").val(++me.instantValue);
    });

    $('body').on("click", ".selection_container .btn-subtract", function () {
        selfContainer.find("input[name=currentValue]").val(--me.instantValue);
    });

   $('body').on("click", ".selection_container .btn-reset", function () {
        me.instantValue = 0;
        selfContainer.find('input[name=currentValue]').val(0);
    });

    $('body').on("click", ".selection_container .btn-save", function () {
        me.savedValue = me.instantValue;
    });

    $('body').on("click", ".selection_container .btn-load", function () {
        me.instantValue = me.savedValue;
        selfContainer.find('input[name=currentValue]').val(me.savedValue);
    });
};

それが役に立てば幸い...

于 2013-04-09T12:51:27.703 に答える