Question

I tried to write some sloppy jQuery code for an inline-confirm “dialog”. It works just fine, except that the delay() only runs one time for each it #row_ID. The delay is meant to fade out the “dialog” if the user doesn’t interact with it within a specific time span. The “cancel” link works great every time.

Any ideas on what I’m doing wrong?

Here’s the 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;

    });

And here’s the 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

Try this:

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