0

一連のボタンを作成し、それらを異なる引数値でコールバックにバインドする jquery 関数を作成しようとしています。私が抱えている問題は、どのボタンがクリックされても、コールバックが常に最後のbuttons[]値「キャンセル」の引数値で呼び出されることです。

var buttons = ["OK|ok", "Cancel|cancel"];
buildButtons(buttons, function(response){
    alert(response);
});

function buildButtons(buttons){
    for (i = 0; i < buttons.length; i++){
        var btnTitle = buttons[i].split("|")[0];
        var btnName = buttons[i].split("|")[1].toString();
        var btnElem = $('<button/>', {
            type: 'button',
            id: 'btn_' + btnName,
            html: btnTitle,
        })

        $(btnElem).on('click', function () {
            //..some other code
            fnResponse(btnName); //<<------- Issue Should return 'ok' or 'cancel'
        });
    }
}

問題は、どのボタンがクリックされても、コールバックが常に最後の要素の値 [btnName] で呼び出されることです。

4

2 に答える 2

0

リテラルごとにコンテキストを変更する必要があります。jQuery でそれを行うことができますeach：

function buildButtons(buttons, fnResponse){
    $.each(buttons, function(index, button)) {
        // wrapped into diffent function, context changed
        var btnTitle = button.split("|")[0];
        var btnName = button.split("|")[1].toString();
        var btnElem = $('<button/>', {
            type: 'button',
            id: 'btn_' + btnName,
            html: btnTitle,
        });

        $(btnElem).on('click', function () {
            //..some other code
            fnResponse(btnName); //<<------- Issue Should return 'ok' or 'cancel'
        });
    });
}

別の解決策: https://gist.github.com/4650951

別の関数が必要な理由の簡単な例: http://jsfiddle.net/nYmTV/

于 2013-01-27T22:21:14.190 に答える
0

ここで問題を再現しました: http://jsfiddle.net/makque/zgHGc/ ログ要素も含めて、コード内で何が起こっているかを正確に確認できるようにしました。

コードを実行しようとすると、forループが実行されたことがわかります。ログ要素では、ボタンの作成と追加のみが実行されたことがわかります#menu。そして、イベントハンドラのコード[内部]はスキップされました...

したがって、これはイベント ハンドラーの定義が正しいことを証明します。

JavaScript は、ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに実行できます。

ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します。

onclick=JavaScript

これを証明するために、ボタンをクリックしたときにのみコードが実行されます (ログから証明されているように)...

問題に関連して: ローカル変数またはその問題の任意の変数 (つまり、for ループ内では、最後に指定された値が保持されます)

つまり...たとえば、

コール 0=i: if var a = i; a=0

at call 1=i: の値var a = i; a=1

その結果、ループのローカル変数を使用してイベント ハンドラー コードを実行すると、ループが既に実行されている場合、現在の値が表示されます。この場合は CANCEL です...

では、どうすればこれを解決できますか?? & @&$!

のコード実行中にfor loop、条件に一致したすべてのコード行が実行されます。これは、これらのコード行が対象であることを意味します。

1 $(btnElem).on('click', function () {
2    ...
3    alert(btnName);
4 });

1 行目と 4 行目は実行されましたが、2 行目と 3 行目は実行されませんでした。

1 行目と 4 行目の実行は、ボタン要素が Eventhandler を持っていることを既に登録しており、onclick実行されるのを待っていることを意味します。

要約すると、原因: 間違った変数を使用している解決策: コンテキスト内で変数を使用する

$(btnElem).on('click', function () {
    fnResponse($(this).html()); //passes the button's title
});

最後に、次のようなコードを作成できます: http://jsfiddle.net/makque/mq9cJ/

私が助けてくれることを願っています！:)

于 2013-01-28T00:07:47.623 に答える