[英]One event handler negates another in jquery — click()
I am having an issue where when one click() handler is called then the other click() handler on a different element won't be called again. 我遇到一个问题,当一个click()处理程序被调用时,另一个元素上的另一个click()处理程序将不会再次被调用。
Basic HTML Elements 基本HTML元素
<label for="pix_size">Default Pixel Size:</label><br>
<input id="pix_size">
<button id="action">Action</button>
<div id="here_table"></div>
Then there is some jquery code to create a table, add classes to the columns, etc. I didn't include here because I wanted to keep it succinct. 然后,有一些jquery代码来创建表,向列中添加类,等等。我之所以不包含在这里,是因为我想保持简洁。
Here are the event handlers that appear to be in conflict 这是看起来有冲突的事件处理程序
$("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
});
the tr.remRow works great until I click the button, then it will never be called again. 在单击按钮之前,tr.remRow可以很好地工作,然后再也不会调用它。 I am sure I just don't understand some jquery binding mechanism but a point in the right direction would be great. 我敢肯定,我只是不了解某些jquery绑定机制,但是朝着正确方向发展的观点将是很棒的。 I want users to be able to click the button, focus/blur the input element, etc and then still be able to click on a row in the table. 我希望用户能够单击按钮,对输入元素进行焦点/模糊处理等,然后仍然能够单击表中的一行。
try using something like 尝试使用类似的东西
$('table').on('click', 'tr.remRow', funciton () {
alert(($(this).index() + 1) + " row was clicked" +
"and its rem value is " + $(this).children(".remColumn").text());
}
IF this is your markup: 如果这是您的标记:
<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>
and you have code that replaces that table, then this would make it work: 并且您有替换该表的代码,那么它将可以工作:
$("#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);
});
add delegate to the first parent element that is not redrawn. 将委托添加到未重绘的第一个父元素。 in this case, i guess that is here_table element. 在这种情况下,我想这是here_table元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.