0

私はjsとjqueryの学習の初期段階にあります。わからない問題で困っています。ユーザー入力を収集する HTML フォームがあります。送信ボタンをクリックすると、ユーザー入力が新しい行としてテーブルに保存されます (「myTable」と呼びましょう)。私はその部分をやり遂げました。しかし、今は myTable の行をクリックしたときに行データを取得したいと考えています。私もそれを持っています。行をクリックするとデータが取得されますが、行をクリックすると同じデータがアラートで複数回取得されます。最初に行をクリックするとアラートが 1 つ表示され、2 回目は 2 つ... というように表示されます。私のエラーを指摘してください。ここに私のhtmlがあります：

<div>label>First Name: </label>
<input id="firstname" type="text" name="first name"/>

<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>

<input type ="button" value = "Submit" onclick ="addRow()" >
</div>

<table id="myTable" border=1 onclick="load_row()">
        <tr >
            <td>
            First Name
            </td>
            <td>
            Last Name
            </td>
        </tr>
</table>

そして、ここに私のjavascriptがあります:この関数は、ユーザー入力を新しい行としてテーブルに追加します:

var addRow = function(){
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;


$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );   
};

そして、この関数は、クリックした行の詳細を警告しています。これは私が何か間違ったことをしていると思うところです：

var load_row = function(){
var rows = $("#myTable tr");

rows.click(function() {
    var data = new Array();
    var cells = $(this).find("td");
    cells.each(function(i, cell) {
        data.push($(cell).text());
    });
    alert(data);
});

};
4

4 に答える 4

1

これはバブリングと呼ばれ、TR をクリックするとすぐに、バインドした TABLE のイベント クリックも発生します。したがって、addRow を呼び出すだけでなく、各 TR で .click イベントを再度バインドする load_row も呼び出します。

テーブル要素の onclick を削除し、「head」タグのどこかに「script」タグを追加します

$(document).ready(function() { load_row() });

または間に追加/変更

row.click => rows.unbind('click').click
于 2012-09-08T22:00:21.293 に答える
1

load_raw+1クリックイベントをすべての行にバインドするたびに発生します。したがって、jquery バインディングを使用し、load_row 関数からonバインディングを削除することをお勧めします。click

$('#myTable').on('click', 'tr', load_row())
于 2012-09-08T22:03:08.113 に答える
0

ユーザーがクリックするたびに、すべての行に新しいクリック イベントを追加しているようです。そのため、新しいクリック イベントを追加する前に、単純にクリック イベントのバインドを解除してください。

rows.unbind("click").click(function() {
  var data = new Array();
  var cells = $(this).find("td");
  cells.each(function(i, cell) {
    data.push($(cell).text());
  });
  alert(data);
});
于 2012-09-08T22:03:51.043 に答える
0

コードをクリーンアップしてインライン JavaScript 呼び出しを削除し、より多くの jQuery ( $("#firstname").val();vs document.getElementById("firstname").value) を使用し、.on()関数を使用してテーブルに追加された新しい行を適切にバインドしました。

jsFiddle の例。

jQuery

$('input[value="Submit"]').click(function() {
    var firstname = $("#firstname").val();
    var lastname = $("#lastname").val();
    $("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>");
});
$("#myTable").on('click', 'tr', function() {
    var data = new Array();
    var cells = $(this).find("td");
    cells.each(function(i, cell) {
        data.push($(cell).text());
    });
    alert(data);
});​

HTML

<div><label>First Name: </label>
<input id="firstname" type="text" name="first name"/>

<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>

<input type ="button" value="Submit" >
</div>

<table id="myTable" border=1>
        <tr >
            <td>
            First Name
            </td>
            <td>
            Last Name
            </td>
        </tr>
</table>​
于 2012-09-08T22:11:42.530 に答える