jQuery：多次延迟fadeOut div

Question

我尝试为内联确认“对话框”编写一些草率的 jQuery 代码。它工作得很好，除了delay() 只为每个#row_ID 运行一次。如果用户在特定时间跨度内没有与之交互，延迟意味着淡出“对话框”。 “取消”链接每次都很好用。

关于我做错了什么有什么想法吗？

这是 JS：

    $("a.i_delete").click(function() {

        var parent = $(this).attr("id");
        var parentRow = "#row_" + parent;
        var inlineConfirm = $('<div id="confirm_' + parent + '" class="inline_c"><a href="#cancel" class="ic_cancel">Cancel, I want to keep it</a><a href="/?id=' + parent + '" class="ic_confirm">Delete</a></div>').hide().fadeIn(500);

        $(parentRow).append(inlineConfirm).delay(3500).queue(function() {
            $("#confirm_" + parent).fadeOut(2000,function() {
                    $("#confirm_" + parent).remove();
                });
        });

            $("a.ic_cancel").click(function() {
                $("#confirm_" + parent).fadeOut(500,function() {
                        $("#confirm_" + parent).remove();
                    });

                return false;
            });

        return false;

    });

这是html：

    <div id="row_XXX" class="l_row">
        Bla bla bla <a href="/?id=XXX" id="XXX" class="i_delete" title="Delete link">Delete</a>
    </div>

Answer 1

试试这个：

$(parentRow)
    .append(inlineConfirm)
    .delay(3500)
    .queue(function(next) {
        $("#confirm_" + parent).fadeOut(2000,function() {
            $("#confirm_" + parent).remove();
        });

        // make sure the queue will continue by
        // calling next function on the queue
        next();
    });

Answer 2

您总是想将 inlineConfirm 标记附加到 parentRow 吗？而是设置父行的 html。每次单击删除时，您都在绑定函数以取消单击事件。请尝试以下代码。

$("a.i_delete").click(function() {

        var parent = $(this).attr("id");
        var parentRow = "#row_" + parent;
        var inlineConfirm = $('<div id="confirm_' + parent + '" class="inline_c"><a href="#cancel" class="ic_cancel">Cancel, I want to keep it</a><a href="/?id=' + parent + '" class="ic_confirm">Delete</a></div>').hide().fadeIn(500);

        $(parentRow).html(inlineConfirm);
        setTimeout(function() {
            $("#confirm_" + parent).fadeOut(2000,function() {
                    $("#confirm_" + parent).remove();
                });
        }, 3500);

            $("a.ic_cancel").unbind('click').click(function() {
                $("#confirm_" + parent).fadeOut(500,function() {
                        $("#confirm_" + parent).remove();
                    });

                return false;
            });

        return false;

    });