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

Question

I just implemented a DataTable in my app, but it seems like javascript doesn't work within the DataTable.

I've attached all code below for better readability.

As you can see, the ccbtn_action="delete" bit is present, but Chrome/IE/FF doesn't seem to want to do anything when the glyphicon is clicked.

This code works perfectly when called from outside the DataTable.

What gives? Is it something to do about JavaScript not being applied to dynamically generated elements?

Thank you!

Here is the Javascript code that doesn't work:

$(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!
}

    });
});

Here is the code for the 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

Try delegating your event like this:

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

My guess is the click event is attached before your ajax request loads the DataTable rows. You can read more here about jQuery event delegation with on() . Specifically:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

Answer 2

Since the js looks ok, this is most probably a timing issue. You part of script that binds the events is executed before the actual elements are created.

To fix that, you can:

1. Make sure the script runs binding after elements creation

2. Use dynamic binding (like .delegate() http://api.jquery.com/delegate/ )

Answer 3

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

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