對象上的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