0

以前に追加された jQuery を使用して要素にアクセスしようとしています。動的に追加された要素は「通常の」コマンドを使用して表示できないことを理解しています.link（）および.on（）に関連する他の多くの質問を見てきましたが、それらの回答を適用する方法がわかりませんこの場合。重複の可能性があることをお詫びしますが、jQuery は初めてです。

これは基本的な例です - テーブルに行とセルを追加し (これは通常ループになります)、セルに画像を挿入します。その後、この画像の src にアクセスして変更したいと思います。

addTableRows = function(){
    $("#tableBody")
        .append($("<tr class='tableRow>")
            .append($("<td valign='top' align='center'>")                               
                .append($("<img src='expand-icon.gif'>")
                    .attr('id','expand-icon')
                    .click(function(){
                         iconClicked();
                    }))));

iconClicked = function(){
    var test = $("#expand-icon").attr("src");
    alert(test);
}

現時点でtestは、「未定義」として返されます。どうすればexpand-icon画像にアクセスできますか?

編集：

(テーブルセルのループと一意の ID を含めるために詳細を追加します)

addTableRows = function(response){
    var members = response['member'];
    $.each(members, function (idx, data) {
        var currentID = data['identifier'];
        $("#tableBody")
            .append($("<tr class='tableRow'>")
                .append($("<td valign='top' align='center'>")                               
                    .append($("<img src='expand-icon.gif'>")
                        .attr('id','expand-icon' + currentID)
                        .click(function(){
                             iconClicked(currentID);
                        })
                    )
                )
        );
    });
}

iconClicked = function(currentID){
    var test = $("#expand-icon" + currentID).attr("src");
    alert(test);
}
4

3 に答える 3

2

あなたのコードはOKです。あなたが持っているのは構文エラーです:

.append($("<tr class='tableRow>")

上の行には'afterがありませんtableRow。また、行の直前に ,の終了がありませんでし};た。addTableRows = function() {iconClicked = function...

次回は、TidyUp や JSHint (JSFiddle のボタンを参照) などのツールを使用すると、コードが明確になり、このようなエラーを見つけやすくなります。

修正版は次のとおりです。

addTableRows = function () {
    $("#tableBody").append(
           $("<tr class='tableRow'>").append( // added ' here
               $("<td valign='top' align='center'>").append(
                    $("<img src='expand-icon.gif'>").attr('id', 'expand-icon').click(function () { iconClicked(); })
               )
           )
    );
}; // added this here

iconClicked = function () {
    var test = $("#expand-icon").attr("src");
    alert(test);
};

ここでデモフィドル。

編集：

上記の構文修正以外に、複数の行の追加とクリックを処理したい場合は、いくつかの代替手段があります。

代替案:

コードの変更を最小限に抑えるiconClicked()ために、クリケット画像を取得するためだけに変更できevent.targetます。

iconClicked = function(){
    var test = $(event.target).attr("src");
    alert(test);
}

これにより、最終的に複数の ID が処理されますが、それらは避ける必要があります。

代替 2 (最適なオプション):

私の個人的なお気に入りは、クリックイベントを処理するためにiconClicked()使用します。on()

addTableRows = function(imageId, imageSrc){
    $("#tableBody").append(
        $("<tr>").addClass('tableRow').append(
            $("<td>").attr('valign','top').attr('align','center').append(
                $("<img>").attr('id', imageId).attr('src',imageSrc)
            )
        )
    );
};
$('#tableBody').on('click', '.tableRow img', function(){
    var test = $(this).attr("src");
    alert(test);
});

addTableRows('expand-icon1', 'http://his-booking.com/images/flag_br.gif');
addTableRows('expand-icon2', 'http://bc.id.au/images/fr_flag.gif');
于 2013-08-11T18:23:31.480 に答える