Question

我有一个用jQuery操作的表，如下所示：https://jsfiddle.net/tuurester/eow3x2w5/那部分都很好并按照预期工作。

我通过jQuery的load函数将该表添加到页面中，如下所示：

$('#matrixclicker').click(function(){
    $('#matrixwrapper').load('matrix.php');
}

$('#matrix-table').on("click", ".matrix-table-chooser", function() {
    $(this).removeClass('matrix-table-chooser');
    $(this).addClass('matrix-table-chosen');
});

$('#matrix-table').on("click", ".matrix-table-chosen", function() {
    $(this).removeClass('matrix-table-chosen');
    $(this).addClass('matrix-table-chooser');
});

该表加载到页面没有任何问题，但我不能再使用jQuery操作它，即更改单元格的类值的功能不再起作用。在阅读了有关stackoverflow的大量相关问题后，我的印象是使用on("click", function())可以解决这个问题，但似乎没有。

我错过了什么？

Answer 1

您正在使用委托事件处理程序，这是正确的，但主页选择器需要是页面加载时DOM中可用的元素。这就是选择表格不起作用的原因;尝试添加事件处理程序后，它会附加到DOM。

要解决此问题，请将选择器更改为#matrixwrapper。另请注意，您可以将两个事件处理程序一起加入，并使用toggleClass()来简化逻辑。

$('#matrixwrapper').on("click", ".matrix-table-chooser, .matrix-table-chosen", function() {
    $(this).toggleClass('matrix-table-chooser matrix-table-chosen');
});

操作动态加载的表

1 个答案: