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;

    });

jQuery：多次延迟fadeOut div

2 个答案: