对象上的Javascript在DataTable行中不起作用

Question

我只是在我的应用程序中实现了一个DataTable，但是javascript在DataTable中似乎不起作用。

我在下面附加了所有代码，以提高可读性。

如您所见，存在ccbtn_action="delete"位，但是单击glyphicon时Chrome / IE / FF似乎不想执行任何操作。

从DataTable外部调用时，此代码可完美工作。

是什么赋予了？ 是否将JavaScript不适用于动态生成的元素，这与之有关吗？

谢谢！

这是无效的Javascript代码：

$(document).ready(function(){

    // Delete Records

    $('[ccbtn_action="delete"]').on('click', function() {
        var type = $(this).attr('ccbtn_value_type');
        var value = $(this).attr('ccbtn_value_id');
        console.log('type=' + type + '&id=' + value);


        if (confirm('Are you sure you want to PERMANENTLY delete this record? There is NO TURNING BACK!')) {
            $.ajax({
            type: 'POST',
            url: 'includes/crmcore_action.php?action=cc_delete',
            data: 'type=' + type + '&id=' + value,
            success: 
            function() {
                $('#cc_pagetop_status').html("<div class='alert alert-success'><strong>Success!</strong> The record was successfully deleted.</div>");

                if (type == "company")
                {
                    window.location = "companies_list.php";
                }
                else
                {
                    location.reload();
                }

            }
        });
} else {
    // Do nothing!
}

    });
});

这是DataTable的代码：

$(document).ready(function() {
    var t = $('#DataTable').DataTable({
        "order": [[ 1, 'asc' ]],
        ajax: {
            url: 'includes/dt_ss.php?getwhat=company',
            dataSrc: ''
        },
        columns: [
        {data: null},
        {"data": null,
        "render": function (data, type, row)
            {
                return '<a href="companies_viewrecord.php?id='+data.id+'">'+data.name+'</a>';
            }
        },
        //{data: 'name'},
        {data: 'tel'},
        {
            "data": "id",
            "render": function ( data, type, full, meta )
            {
                return '<span class="glyphicon glyphicon-remove" ccbtn_action="delete" ccbtn_value_type="company" ccbtn_value_id="'+data+'" data-toggle="tooltip" data-placement="bottom" title="Click me to delete"></span>';
            }
        }
        ],
    });

     t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
});

Answer 1

尝试像这样委派您的活动：

$('#DataTable').on('click', '[ccbtn_action="delete"]', function() { ...

我的猜测是在您的Ajax请求加载DataTable行之前会附加click事件。 您可以在这里阅读更多有关on() jQuery事件委托的信息 。 特别：

事件处理程序仅绑定到当前选定的元素； 它们必须在您的代码调用.on（）时存在。

Answer 2

由于js看起来还不错，所以这很可能是时间问题。 在创建实际元素之前，将执行绑定事件的脚本的一部分。

要解决此问题，您可以：

1. 确保脚本在创建元素后运行绑定

2. 使用动态绑定（例如.delegate（） http://api.jquery.com/delegate/ ）

Answer 3

尝试这样，但jquery版本必须为1.9+

$(document).on('click', '[ccbtn_action="delete"]', function() { // your remaining code