Question

我正在尝试使用ajax删除表中的图像。此图像表使用php动态生成。在删除图像之前，我使用Bootstrap模式进行符合。

这是我的Jquery -

// Display confirmation dialog  
$('td a.delete-slideshow-image').click(function(e) {
    var imageId = $(this).attr('id');
    if (!$('#deleteSlideshowConfirmation').length) {
        $('body').append('<div id="deleteSlideshowConfirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true">'+
                                                        '<div class="modal-dialog">'+
                                                                '<div class="modal-content">'+
                                                                        '<div class="modal-header">'+
                                                                                '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                                                                                '<h4 class="modal-title">Delete Confirmation</h4>'+
                                                                        '</div>'+
                                                                        '<div class="modal-body"></div>'+
                                                                        '<div class="modal-footer">'+
                                                                                '<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>'+
                                                                                '<a class="btn btn-primary slideshowConfirmOk" id="'+imageId+'">Delete</a>'+
                                                                        '</div>'+
                                                                '</div>'+
                                                        '</div>'+
                                                '</div>');
    }

    $('#deleteSlideshowConfirmation').find('.modal-body').text($(this).attr('data-confirm'));

    $( "a.slideshowConfirmOk" ).click(function() {  
        var id = $(this).attr('id');
        var data = 'imageId=' + id ;
        var parent = $(this).parent().parent();

        alert(data);

        $.ajax(
        {
                 type: "POST",
                 url: "delete_row.php",
                 data: data,
                 cache: false,

                 success: function()
                 {
                    parent.fadeOut('slow', function() {$(this).remove();});
                 }
         });
    });

    $('#deleteSlideshowConfirmation').modal({show:true});
    return false;   

e.preventDefault();
});

我的问题是当我符合删除其不更改的图像ID时。如果需要更改我想刷新我的页面。

有人可以告诉我这段代码有什么问题。希望有人可以帮助我。谢谢。

Answer 1

尝试一下：

    // Display confirmation dialog  
    $('td a.delete-slideshow-image').click(function (e) {
        window.tr = $(this).parents('tr'); // store the 'TR' in a global variable, no need for the keyword 'var'
        var imageId = $(this).data('id'); // use data-id='$image_id' in your HTML table
        var modal = '<div id="deleteSlideshowConfirmation" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true">' + 
            '<div class="modal-dialog">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
            '<h4 class="modal-title">Delete Confirmation</h4>' +
            '</div>' +
            '<div class="modal-body"></div>' +
            '<div class="modal-footer">' +
            '<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>' +
            '<a class="btn btn-primary slideshowConfirmOk" data-id="' + imageId + '">Delete</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>'; // put your modal content in a variable


        $(modal).find('.modal-body').text($(this).attr('data-confirm'));

        $(modal).modal({ // then use jQuery selector on that variable to make it show, no need for appending to the body
            show: true
        });
        return false;

        e.preventDefault();
    });
    // separate the two click handlers
    $(document).on('click', 'a.slideshowConfirmOk', function () { // use $(document) to dyanmically bind the event on your confirm button
            var id = $(this).data('id'); // use data-id="'+imageId+'" in your modal
            var data = 'imageId=' + id;
            // var parent = $(this).parents('tr'); << this is useless now

            console.log(data);

            $.ajax({
                type: "POST",
                url: "delete_row.php",
                data: data,
                cache: false,

                success: function () {
                    $('#deleteSlideshowConfirmation.modal').modal('hide'); // hide modal on ajax success
                    window.tr.fadeOut('slow', function () { // use the global variable here to fade it out
                        $(this).remove();
                    });
                }
            });
        });

这对你有用吗？

Answer 2

正如你所说的那样，你动态地生成表格，以便在那里发生什么。 Jquery ready函数在DOM加载后绑定元素上的事件，在您的情况下，它无法绑定目标元素上的事件。尝试更改click事件的语法，如下所示。

$(document).on('click','td a.delete-slideshow-image', function(e) {

//Your code

})

在你的ajax电话中

$( document ).on('click',"a.slideshowConfirmOk", function() {  
//AJAX code
})

主要关键是在动态处理元素时将事件绑定到文档上。我假设你已经包含了jquery的最新版本。

我的jquery - ajax请求无法正常工作

2 个答案: