Question

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

为了更好的可读性，我附上了以下所有代码。

如您所见，ccbtn_action="delete"位存在，但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事件。您可以在此处阅读有关jQuery event delegation with on()的更多信息。具体做法是：

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

Answer 2

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

要解决此问题，您可以：

确保脚本在元素创建后运行绑定
使用动态绑定（例如.delegate（）http://api.jquery.com/delegate/）

Answer 3

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

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

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

3 个答案: