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

这如何为您工作？

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的最新版本。