Question

在dataTable中添加任何行后，编辑或删除按钮单击不起作用。我用ajax完成了这个。在成功函数中我已经破坏了dataTable。然后加载所有数据并启动dataTable。我的代码如下。

HTML代码：

<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <button class="btn btn-success" title="Add Items" id="addCalzone"><i class="halflings-icon white plus"></i> Add Item</button><br/><br/>
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Price</th>
            <th>
                <div class="text-center">
                    Action
                </div>
            </th>
        </tr>
    </thead>
    <tbody class="dataTable-tbody">
        <?php foreach($row as $key => $r): ?>
        <tr class="tableRow" data-id="<?= htmlentities(stripcslashes($r['id']), ENT_QUOTES, 'UTF-8'); ?>">
            <td></td>
            <td><?= htmlentities(stripcslashes($r['name']), ENT_QUOTES, 'UTF-8'); ?></td>
            <td> $ <?= htmlentities(stripcslashes($r['price']), ENT_QUOTES, 'UTF-8'); ?></td>
            <td>
                <div class="text-center">
                    <button class="btn btn-info editCalzone" title="Edit"><i class="halflings-icon white edit"></i> Edit</button>
                    <button class="btn btn-danger dltCalzone" title="Delete"><i class="halflings-icon white trash"></i> Delete</button>
                </div>
            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>


<div class="modal hide fade" id="addItem">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h1>Calzone</h1>
    </div>
    <div class="modal-body">
        <h3>Name</h3>
        <input type="text" id="itemName" value="" required="required" />
        <input type="hidden" id="type" value="add"/>
        <h3>Price</h3>
        <input type="number" min="0" step="0.01" value="" required="required" id="itemPrice" />
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" id="addClose" data-dismiss="modal">Close</button>
        <button class="btn btn-success" id="addbtn">Save</button>
    </div>
</div>

Javascript代码：

function initDataTable(){
    $('.datatable').dataTable({
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    } );
    $('.btn-close').click(function(e){
        e.preventDefault();
        $(this).parent().parent().parent().fadeOut();
    });
    $('.btn-minimize').click(function(e){
        e.preventDefault();
        var $target = $(this).parent().parent().next('.box-content');
        if($target.is(':visible')) $('i',$(this)).removeClass('chevron-up').addClass('chevron-down');
        else                       $('i',$(this)).removeClass('chevron-down').addClass('chevron-up');
        $target.slideToggle();
    });
    $('.btn-setting').click(function(e){
        e.preventDefault();
        $('#myModal').modal('show');
    });
}

$('#addbtn').click(function(){
    var $add = {
        name : $('#itemName').val(),
        cost : $('#itemPrice').val(),
        type : $('#type').val()
    };

    if($add.name == '' || $add.cost == ''){
        alert('Both fields must be filled');
    }else{
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: $calzone.submitURL,
            data: {
                calzoneName: $add.name,
                calzoneCost: $add.cost,
                calzoneAction: $add.type
            },
            cache: false,
            error: function(){
                alert('An Error Occured !!');
            },
            success: function(response){
                alert('Successfully Saved !!');
                $('#itemName').val('');
                $('#itemPrice').val('');
                $('#type').val('');

                $('.datatable').DataTable().destroy();
                $('.dataTable-tbody').html('');
                for(i=0; i<response.length; ++i){
                    var content = '<tr class="tableRow" data-id="' + response[i].id + '">' +
                        '<td>' + (i+1) + '</td>' +
                        '<td>' + response[i].name + '</td>' +
                        '<td>' + response[i].price + '</td>' +
                        '<td>' +
                            '<div class="text-center">' +
                                '<button class="btn btn-info editCalzone" title="Edit"><i class="halflings-icon white edit"></i> Edit</button>&nbsp;' +
                                '<button class="btn btn-danger dltCalzone" title="Delete"><i class="halflings-icon white trash"></i> Delete</button>' +
                            '</div>' +
                        '</td>' +
                        '</tr>';
                    $('.dataTable-tbody').append(content);
                }
                initDataTable();
                $('#addItem').modal('hide');
            }
        });
    }
});

$('.editCalzone').click(function(){
    $('#addItem').modal('show', {
        backdrop: 'static'
    });

    var $edit = {
        name : $(this).closest('tr').find('td').eq(1).text(),
        price : $(this).closest('tr').find('td').eq(2).text().split(' ')[2],
        type : $(this).closest('tr').data('id')
    };

    $('#itemName').val($edit.name);
    $('#itemPrice').val($edit.price);
    $('#type').val($edit.type);
});

$('.dltCalzone').click(function(){
    var $dlt = {
        confirm : confirm("Are you want to delete the selected item ?"),
        key : $(this).closest('tr').data('id')
    };
    if($dlt.confirm){
        $.ajax({
            type: 'POST',
            url: $calzone.submitURL,
            data: {
                deleteKey : $dlt.key
            },
            error: function(){
                alert('An Error Occured');
            },
            success: function(){
                alert('Data has been deleted !!');
                location.reload();
            }
        });
    }else{
        alert('Your data is safe !');
    }
});

服务器的响应非常完美。没有错误。但是在添加行或编辑行的信息后，“编辑”和“删除”按钮不起作用。但重新加载页面后它正在工作。 dataTable初始化有什么问题，我想不出来。请帮我弄清问题并解决。

Answer 1

替换你的

$('.editCalzone').click(function(){

$('.dltCalzone').click(function(){

带

 $(document).on('click', '.editCalzone', function(){

$(document).on('click', '.dltCalzone', function(){

jquery按钮单击事件不适用于dataTable

1 个答案: