JQuery: задержка FadeOut Div несколько раз - PullRequest
Новая
       39

JQuery: задержка FadeOut Div несколько раз

0 голосов
/ 11 июля 2011

Я попытался написать неаккуратный код 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>

Ответы [ 2 ]

1 голос
/ 11 июля 2011

Вы всегда хотите добавить разметку 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;

    });
1 голос
/ 11 июля 2011

Попробуйте это: 

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