-3

JQueryを使用して動的にテーブルを作成しました。各行にボタン（画像）を追加しました。特定のボタンをクリックすると、その特定のボタンだけにいくつかの機能 (例: アラート) を割り当てる必要があります。ここでは、アラートのみが最初の行のボタンに対してのみ機能しています。他の行のボタンでは、クリック イベントはトリガーされません。

そして、ボタンがクリックされたアラートで適切な行番号を取得できません。

私のスクリプト：

$(document).ready(function () {
  for (i = 1; i < 10; i++) {
    var content = '<table>'
    content += '<tr><td>'
    content += '<img class="inline" id="submitbtn" src="../../submit.png" />';
    content += '</td></tr>'
    content += '</table>'
    $("#mainSection").append(content);
    $("#submitbtn").click(function () {
      alert("row" + i + "Data Submitted");
    });
  }
});
my html; < div id = 'mainSection' > < /div>
4

3 に答える 3

3

そして、submitbtn で id を class に変更します

$(document).on('click', '.submitbtn', function() {
    alert("row" + i + "Data Submitted" );     
});
于 2013-08-22T14:47:33.250 に答える
3

要素が作成される前に、ロード時にイベントがアタッチされるため、動的コンテンツには委任されたイベント ハンドラーを使用する必要があります。また、id実際にはclass. 最後に、i変数はクリック ハンドラー内では使用できないため、DOM を走査しindex()て最も近いtr要素の を取得する必要があります。これを試して：

for (i=1; i<10; i++) {
    var content = '<table>'
    content += '<tr><td>'
    content += '<img class="inline submitbtn" src="../../submit.png" />';
    content += '</td></tr>'
    content += '</table>'
    $("#mainSection").append(content);
}

$("#mainSection").on('click', '.submitbtn', function() {
    alert("row" + $(this).closest('table').index() + "Data Submitted" );
});
于 2013-08-22T14:48:11.097 に答える