javascript - 一个事件处理程序在 jquery 中否定另一个事件处理程序——click()

Question

我遇到一个问题，当调用一个 click() 处理程序时，将不会再次调用不同元素上的另一个 click() 处理程序。

基本 HTML 元素

<label for="pix_size">Default Pixel Size:</label><br>
<input id="pix_size">
<button id="action">Action</button>
<div id="here_table"></div>

然后有一些 jquery 代码来创建表，向列添加类等。我没有在这里包括，因为我想保持简洁。

以下是似乎有冲突的事件处理程序

$("tr.remRow").click(function() {    // do something when a specific row was clicked
   alert(($(this).index() + 1) + " row was clicked" + 
         "and its rem value is " + $(this).children(".remColumn").text()); 
});

$("#action").click(function () {    // button event handler
    curPixSize = $("#pix_size").val(); // this refers to the 2nd row in the table
    redrawTable(3,5, curPixSize); // redraw the table with the new value from the input
});

tr.remRow 工作得很好，直到我单击该按钮，然后它将永远不会被再次调用。我确信我只是不了解一些 jquery 绑定机制，但是朝着正确的方向前进会很棒。我希望用户能够单击按钮、聚焦/模糊输入元素等，然后仍然能够单击表格中的一行。

Answer 1

如果这是您的标记：

<label for="pix_size">Default Pixel Size:</label><br>
<input id="pix_size">
<button id="action">Action</button>
<div id="here_table"><table>
rest of table here
</table></div>

并且您有替换该表的代码，那么这将使其工作：

$("#here_table").on('click',"tr.remRow",function() { 
   alert(($(this).index() + 1) + " row was clicked" + 
         "and its rem value is " + $(this).children(".remColumn").text()); 
});
// no change here:
$("#action").click(function () {  
    curPixSize = $("#pix_size").val();
    redrawTable(3,5, curPixSize);
});

Answer 2

尝试使用类似的东西

$('table').on('click', 'tr.remRow', funciton () {
alert(($(this).index() + 1) + " row was clicked" + 
         "and its rem value is " + $(this).children(".remColumn").text());
} 

Answer 3

将委托添加到未重绘的第一个父元素。在这种情况下，我猜这是 here_table 元素。