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