jQuery：多次延迟fadeOut div

发布于 2024-11-19 15:30:12 字数 1322 浏览 2 评论 0原文

我尝试为内联确认“对话框”编写一些草率的 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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

短叹 2024-11-26 15:30:12

试试这个：

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

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

回复收藏 0 原文

鹿童谣 2024-11-26 15:30:12

您是否总是想将 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;

    });

Do you always want to append the inlineConfirm markup to parentRow? Instead set the html of the parent row. Every time you click on delete you are binding function to cancel click event. Please try the below code.

$("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;

    });

回复收藏 0 原文

~没有更多了~