0

JSON配列上でのボタンの動的生成に苦労しています。

簡略化されたコードは次のとおりです（目的はデータに基づいてテーブルを作成することですが、まだ何も凝っていません。私はまだこれに習熟していません）：

$.ajax({
    /* type, content, etc. removed */
    success: function (data, textStatus, XmlHttpRequest) {
        var target = $('myContainerDiv');
        var result = data.d.results;

        var $table = $('<table />');
        for(var i=0;i < results.length; i++) {
            var $row = $('<tr />');
            var $cell = $('<td />');
            var $button = $('<input />').attr({ type: 'button', value: 'Edit', name: 'btn' + i });
            $button.click(function () {

                // **
                // In a .NET environment, this would become a closure
                // I suspect this is the offending bit of code
                //

                alert(results[i].name);

            };

            $cell.append($button);
            $row.append($cell);
            $table.append($row);
        }

        $target.append($table);
    },
    /* error etc. removed*/
});

基本的に、ボタンで満たされた列が必要です。各ボタンは、$.ajax呼び出しから取得した配列からフィールドの値をポップアップします。

ボタンは実際には表示されますが、クリックに反応せず、F12ツールコンソールにランタイムエラーは表示されません。これはおそらく、このスクリプトがMicrosoft Dynamics CRM 2011ソリューションの構成ページの一部であるという事実によるものですが、それ以外は、AJAX呼び出しは問題なく続行されると確信しています（データを印刷してみましたが、それを見ることができます）。

アップデート

クリックハンドラー内の参照iは確かに問題のある行でした。このようにコードを変更すると、期待どおりに機能するようになりました。

var $button = $('<input />').attr({ type: 'button', value: 'Edit', name: 'btn' + results[i].name });
$button.click(function () {
    // 'i' value is NOT what I thought it was !
    alert(this.name.substring(3,this.name.length));
    // I found out in the meanwhile that 'this' references the event source
};
4

3 に答える 3

1

まず、コードにいくつかの構文エラーがあり、まったく実行されていない可能性があります。

  1. divコンテナのIDが、の場合myContainerDiv、ターゲットを取得するには、$('#myContainerDiv')

  2. resultvarialbeを作成しますが、results変数を使用します

  3. かっこを閉じていません$button.click

  4. すべてを追加していますが$target、次のように定義されていますtarget

実際の問題は、あなたが言うように、クロージャーである可能性があります。値ではなく変数をクローズすることを忘れないでください。ボタンクリックハンドラーを実行するとi、値がresults.length。になり、その時点で範囲外になります。

オブジェクトを別の場所に保存しresults、探しているオブジェクトのIDをボタンから抽出して（名前を付けてから）、その方法でプロパティ'btn'+iにアクセスすることができます。name

于 2012-09-13T16:27:09.273 に答える
0

あなたはこれを試すことができます...

$.ajax({
/* type, content, etc. removed */
success: function (data, textStatus, XmlHttpRequest) {
    var $target = $('#myContainerDiv'),
        results = data.d.results,
        $table = $target.append('<table />').children('table:last-child'), $trSet = $([]);
    for(var i=0; i < results.length; i++) {
        $trSet = $trSet.add(
            $([
                '<tr><td>',
                $('<input type="button" value="edit" name="btn'+i+'" rel="'+results[i].name+'" />').wrap('<div />').html(),
                '</td></tr>'
            ].join(''))
        );
    }       
    // Using Event delegation ... Only one handler is attached to the DOM.
    $table.append($trSet).click(function(e){
        var $t = $(e.target);

        if( $t.is('input[type="button"]') ){
            alert($t.attr('rel'));
        }
        // choose to return false whether to prevent event bubbling up the DOM or not
        // return false;
    });     
  },
   /* error etc. removed*/
});
于 2012-09-13T16:59:02.587 に答える
0

.click（）ブラケットを閉じていないことに気づきました。

試す...

$button.click(function () {
    alert(results[i].name);
});
于 2012-09-13T16:24:29.807 に答える