切换无法与DataTable响应式一起使用 [英] Toggle not working with DataTable responsive

问题描述

这就是我的编码方式:

$(document).ready(function () {

    $("[id^=btnToggle]").click(function () {
        $('#infoToggle' + this.id.match(/\d+$/)[0]).toggle();
    });

    $('#dataTables-example').DataTable({
        responsive: true
    });

});

此代码$("[id^=btnToggle]")无法正常工作，但是当我删除$('#dataTables-example')时，它工作正常.

Here this code $("[id^=btnToggle]") is not working, but when I remove $('#dataTables-example') it is working fine.

我试图调换他们的位置，我尝试使用单独的文档准备功能，但这没有用.

I tried reversing their positions, I tried using separate document ready function, it did not work.

请让我知道如何解决此问题?

Please let me know how to fix this?

谢谢

推荐答案

调用datatable事件后，将修改dom(#dataTables-example).由于哪些内部元素不再具有以前附加的事件.在这种情况下，您需要使用事件委托:

The dom(#dataTables-example) is modified when after calling the datatable event. due to which inner elements no more have previously attached events .You need to use event delegation in this case:

 $("body").on('click','[id^=btnToggle]',function () {
    $('#infoToggle' + this.id.match(/\d+$/)[0]).toggle();
});

这篇关于切换无法与DataTable响应式一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！