嘗試獲取行數據警報。爲什麼我在點擊時收到多個提醒？

Question

我在學習js和jquery的早期階段。我陷入了一個我不明白的問題。 我有一個HTML表單，我正在收集用戶輸入。當點擊提交按鈕時，用戶輸入被保存爲一個新的表格（讓我們稱之爲「myTable」）。我完成了那部分。但是現在我想在myTable中單擊一行時獲取行數據。我也有這樣的。點擊行時，我確實得到了數據，除了點擊行時，我多次獲得了相同的警報數據。我第一次點擊行時，我得到一個警報，第二次兩個......等等。請指出我的error.Here是我的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); 
}); 

}; 

Answer 1

看起來你似乎在每次用戶點擊時向每一行添加一個新的點擊事件。因此，只需在添加新事件之前取消綁定單擊事件即可。

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); 
}); 

Answer 2

這就是所謂的氣泡，只要你點擊TR，你也火表您綁定的情況下點擊。所以你不只是調用addRow，還有load_row，它再次綁定每個TR上的.click事件。

表元素上卸下的onclick，並在「腳本」標籤的地方加入你的「頭」標籤像

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

或添加/

row.click => rows.unbind('click').click

Answer 3

之間改變它發生的原因每次您撥打load_raw時，您都會將+1點擊事件綁定到每一行。 所以最好使用jquery on綁定並從load_row函數中刪除click綁定。

$('#myTable').on('click', 'tr', load_row()) 

Answer 4

我清理你的代碼刪除JavaScript調用內聯，使用更加的jQuery（$("#firstname").val(); VS document.getElementById("firstname").value）和使用的.on()功能正確綁定添加到表的新行。

jsFiddle example。

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>​