2

テンプレートのコピーを作成し、.click（）メソッドをそれらに適切に結び付けるときに問題があるようです。たとえば、次のJavaScriptを使用します。

function TestMethod() {
    var test = Array();
    test[0] = 0;
    test[1] = 1;
    test[2] = 2;

    // Insert link into the page
    $("#test_div").html("<a href=\"#\"></a><br>");
    var list;
    for (x = 0; x < test.length; x++) {
        var temp = $("#test_div").clone();
        temp.find('a').html("Item #" + test[x]);
        temp.click(function () { alert(x); });

        if (list == undefined)
            list = temp;
        else
            list = list.append(temp.contents());
    }
    $("#test_div2").append(list);
 }

これで私が見ている問題は、ユーザーがどのアイテムをクリックしても、最初のいくつかのアイテムをクリックした場合でも、常にalert（2）を実行することです。

どうすればこれを機能させることができますか？

編集：私は問題をはるかに明確に示すはずの非常に単純な例を作成しました。どのアイテムをクリックしても、常に番号2のアラートボックスが表示されます。

4

2 に答える 2

1

私が間違っている場合は訂正してください。JS.valueOf()ではブールオブジェクトのプリミティブ値を返します。

これは起こりませんShowObject(5,'T');...ShowObject(objectVal.valueOf(), 'T');

objects[x].Value直接使ってみませんか？ShowObject(objects[x].Value, 'T');

WOOOOOSSSHHHH！

深く検索した後...私は解決策を見つけました...

それはクロージャーなので、実際にはそのようには機能しません...
ここに解決策があります、

temp.find('a').bind('click', {testVal: x},function (e) { 
   alert(e.data.testVal);
   return false;
});

最良の説明については、これを読んでください...ページの中央部分にある「イベントデータ
の受け渡し」に上記のコードの簡単なデモがあります

于 2010-05-14T04:57:28.130 に答える
1

あなたの問題はJavaScriptのスコープの誤解から生じていると思います。（私が間違っている場合はお詫びします。）

function () {
    for (...) {
        var foo = ...;

        $('<div>').click(function () { alert(foo); }).appendTo(...);
    }
}

JavaScriptでは、関数のみが新しいスコープ（一般にクロージャーと呼ばれます）を作成します。

したがって、ループのスコープはであり、ではないため、ループのすべてのラウンドでfor同じことがわかります。これは、定義されているイベントにも当てはまります。ループが終了するまでに、すべての人が同じことを知り、それが割り当てられた最後の値であることがわかります。foofunctionforclickfoo

これを回避するには、すぐに実行される匿名関数を使用して内部クロージャを作成します。

function () {
    for (...) {
        (function (foo) {
            $('<div>').click(function () { alert(foo); }).appendTo(...);
        })(...);
    }
}

または、次のようなコールバックベースの関数を使用しますjQuery.each。

function () {
    $.each(..., function (i, foo) {
        $('<div>').click(function () { alert(foo); }).appendTo(...);
    });
}

あなたの問題については、後者を使用します（の変更に注意してくださいobjects[x]）object：

var list;
jQuery.each(data.objects, function (x, object) {

    // Clone the object list item template
    var item = $("#object_item_list_template").clone();

    // Setup the click action and inner text for the link tag in the template
    var objectVal = object.Value;
    item.find('a').click(function () { ShowObject(objectVal.valueOf(), 'T'); }).html(object.Text);

    // add the html to the list
    if (list == undefined)
        list = item;
    else
        list.append(item.contents());
});
于 2010-05-14T06:47:03.587 に答える