将确认/取消弹出窗口插入JQuery-CSS问题

Question

I am still quite new to JQuery and I am trying to make a simple pop-up message to confirm a delete, but I want the table row to turn red during this process.

I found this code that seems sweet, short, and simple.

$(document).ready(function(){
    $('.confirm').click(function(){
        var answer = confirm("Are you sure you want to delete this item?");
        if (answer){
            return true;
        } else {
            return false;
        }
    });
});

from: http://brettgregson.com/programming/how-to-make-a-are-you-sure-pop-up-with-jquery/138

And I am "attempting" to add it onto my current deleteFunction(), but I am still pretty new to JQuery and I am having some "bugs" with it.

My deleteFunction (no confirmation - but color updating works fine)

function deleteFunction(element) {
        var newID = $(element).closest("td").find("span.ID").text();
        $(element).closest("tr").css('background-color', 'red');
        $.post(
                '@Url.Action("customDelete", "Movie")',
                 {
                     'id': newID
                 },
                function (data) { },
                "json"
            );
        $(element).closest("tr").hide();
    }

My insertion of the confirmation box works, but does not update the tr background color, nor does it revert the color back to the default upon cancellation.

function deleteFunction(element) {
    var newID = $(element).closest("td").find("span.ID").text();
    $(element).closest("tr").css('background-color', 'red');

    $(document).ready(function () {

        var answer = confirm("Are you sure you want to delete this item?");
        if (answer) {
            $.post(
        '@Url.Action("customDelete", "Movie")',
        {
            'id': newID
        },
        function (data) { },
        "json"
        );
            $(element).closest("tr").remove();
            return true;
        } else {
            $(element).closest("tr").css('background-color', 'default');
            return false;
        }
    });


}

If someone could explain why the CSS color is not being touched until after the confirmation box appears (or why it does not remove the color after Cancel is pressed) it would be very much appreciated.

Answer 1

I've created a jsfiddle for you: working sample . As for clearing the color, you should use css('background-color', 'initial') . As for highlighting - it should highlight, as sample does. If it does not help, then feel free to reveal your html markup, most likely the issue is there

Answer 2

You can call your delete function if user wants to delete, like this way
here is your delete function:

function deleteFunction(element) {
    var newID = $(element).closest("td").find("span.ID").text();
    $(element).closest("tr").css('background-color', 'red');
    $.post(
            '@Url.Action("customDelete", "Movie")',
             {
                 'id': newID
             },
            function (data) { },
            "json"
        );
    $(element).closest("tr").hide();
}

and here is cofirm to delete:

$(document).ready(function(){
  var ans=confirm("Are you sure you want to delete this item?");
 if(ans)
    {
     deleteFunction(element);
     }
   else
    {
        return false;
     }
});