jquery.dataTables 隐藏列使我的 JQuery 崩溃

Question

我在 AdminLTE 中使用数据表库。我使用一个小 JQuery 代码将数据带到编辑模式。

$(document).ready(function () {
/* =========================================================
      EDITAR ALERGENOS
==========================================================*/
$(".btn-warning").click(function (e) {
    e.preventDefault();
    $('#alergenoEditModal').modal('show');
    // capturamos la informacion de la fila
    var alergeno = e.currentTarget.parentElement.parentNode;
    var nombre_ES = alergeno.children[1].innerHTML;
    var nombre_CA = alergeno.children[2].innerHTML;
    var nombre_EN = alergeno.children[3].innerHTML;
    var nombre_DE = alergeno.children[4].innerHTML;

    $('#edit_nombre_ES').val(nombre_ES);
    $('#edit_nombre_CA').val(nombre_CA);
    $('#edit_nombre_EN').val(nombre_EN);
    $('#edit_nombre_DE').val(nombre_DE);

});

});

一切正常，直到隐藏列以响应为止。那个时候动作没反应我

在全屏模式下，我们按下黄色的编辑按钮。

然后模态框出现，其中包含要编辑的数据。好的。

但是，当屏幕缩小并且按钮被隐藏时...

我们按蓝色按钮调出黄色的编辑按钮……没用

我不明白问题出在哪里。

Answer 1

您必须对动态添加的元素使用事件委托。试试这个 -

$(document).ready(function () {

    $(document).on('click', ".btn-warning", function (e) {
        e.preventDefault();
        $('#alergenoEditModal').modal('show');
        // capturamos la informacion de la fila
        var alergeno = e.currentTarget.parentElement.parentNode;
        var nombre_ES = alergeno.children[1].innerHTML;
        var nombre_CA = alergeno.children[2].innerHTML;
        var nombre_EN = alergeno.children[3].innerHTML;
        var nombre_DE = alergeno.children[4].innerHTML;

        $('#edit_nombre_ES').val(nombre_ES);
        $('#edit_nombre_CA').val(nombre_CA);
        $('#edit_nombre_EN').val(nombre_EN);
        $('#edit_nombre_DE').val(nombre_DE);

    });

});

jquery.dataTables 隐藏列使我的 JQuery 崩溃

jquery.dataTables with hidden columns crash my JQuery

javascript

jquery

datatables

adminlte