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

尝试使用类似

的内容

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

Answer 2

如果这是你的标记：

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

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

一个事件处理程序在jquery中否定另一个事件处理程序 - click（）

3 个答案: