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

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();
                    });
                }
            });
        });

这对你来说如何？