Question

我在div中有一些数据表，我希望“.toggle（）”通过单击图像隐藏或显示它们（可以工作）。在数据表初始化之后，我的点击处理程序仍然每次都会触发，但$（this）仅在最后一个元素上正确。在每个其他元素上，$（this）是'prevObject'，它不能与.toggle（）一起使用。

<div class='toggle'>
  <img src='/some/path/foo.jpg'>
  <table class='dt'>
     ...
  </table>
</div>
<div class='toggle'>
  <img src='/some/path/foo.jpg'>
  <table class='dt'>
     ...
  </table>
</div>
<div class='toggle'>
  <img src='/some/path/foo.jpg'>
  <table class='dt'>
     ...
  </table>
</div>

//This works if I don't initialize datatables
$(".toggle").on("click", "img", function(event) {
    $(this).siblings(".dt").toggle();
});

知道$（this）发生了什么？

编辑：如果数据表未初始化，则上面的jQuery选择器“$（this）”工作正常。初始化后，“$（this）”在所有元素上返回“prevObject”，但其中一个元素。因此，单击时一个元素可正常工作，而其余元素则无法正常工作。

EDIT2：这是一个解释问题的方法：http://jsfiddle.net/S6bhL/10/

EDIT3：在我的实际应用中，我不得不最终使用以下解决方案进行以下修改：

$(this).parent().parent().find(".dt");
$(this).parent().parent().find(".dataTables_wrapper");

Answer 1

编辑：由于OP更新了问题，这是我更新的答案。

UPDATED JSFIDDLE DEMO

看起来，无论何时单击init数据表，它都被div dataTables_wrapper包装。所以处理这两种情况。

$(document).ready(function () {

    $(".toggle").on("click", "img", function (event) {
        var $nextDT = $(this).next('.dt');
        var $nextDTWrap = $(this).next('.dataTables_wrapper');

        if ($nextDT.length) {
            $nextDT.toggle();
        } else if ($nextDTWrap.length) {
            $nextDTWrap.toggle();
        }
    });
});

function doit() {
    $(".dt").each(function () {
        $(this).dataTable();
    });
}

使用.toggle（）的jQuery单击处理程序不适用于数据表

1 个答案: