Question

首先，我是jQuery的新人，我非常清楚这不是一个新问题。在搜索时，我看到很多类似的帖子，但是我已经尝试过这些帖子中的解决方案而且没有任何积极的结果。我已经添加了一些我在底部尝试过的东西的列表。

到目前为止工作原理......

我正在使用ASP.NET和jQuery中的单页面应用程序。我在Default.aspx.cs中使用Web方法与C＃和我的数据库集成。

应用程序从数据库中获取员工姓名，并使用ASP.NET转发器在屏幕上为每个员工创建一个框。然后可以将这些框拖放到包含jQuery droppables的弹出窗口中，这将根据它们放入的框更新数据库中的雇员状态。这一切都可以100％正常工作。

问题......

我正在尝试添加可取消的超时功能，以便某人可以在提交到数据库之前取消其交互。

第一次尝试在dropzone中删除一个框时，一切正常，我的意思是预期的100％，包括将状态更改记录到数据库中。然后对于每次丢弃之后只有超时功能工作，ok和取消按钮根本不会出现在屏幕上，但是3秒后超时功能确认操作并且所需的状态更改被记录到数据库中。 / p>

我的jQuery脚本相当冗长（就像这篇文章（对不起））所以我将尝试只分享最相关的代码部分，希望它足以让你提供一些见解。

的Default.aspx

<div class="timeout">
    <div class="really">
        Confirm?
        <div class="progress">
            <div class="progress-bar" role="progressbar" data-transitiongoal="105"></div>
        </div>
    </div>
    <div class="okay">
        <img src="Content/ok3.png" />
    </div>
    <div class="cancel">
        <img src="Content/cancel3.png" />
    </div>
    <br />
</div>
<div class="promptpicker">
    <div>
        <h2>Select Date-Range</h2>
        <p>Select the first and last dates to enter your time off.</p>
    </div>
    <input id="e4" name="e4">
    <div class="submitDates">
        Submit
    </div>
</div>
...
//This code continues to show the asp.net repeaters for the employee boxes and flyout zones...

app.js （有问题的代码）

$(".okay").off();
$(".cancel").off();
$(".timeout").delay(1000).css('visibility', 'visible');
$(".okay").delay(1000).css('visibility', 'visible');
$(".cancel").delay(1000).css('visibility', 'visible');
$('.progress .progress-bar').delay(1000).progressbar({ display_text: 'fill' });


/*************************************************************************
*     User Selects Nothing
**************************************************************************/
var timeoutId = setTimeout(function () {

    $(".really").replaceWith('<div class="really">Confirmed.</div>');
    $('.cancel').fadeTo(300, 0, function () {
        $(".cancel").css('visibility', 'hidden');
    });

    $(".okay").animate({
        marginRight: "-=300px"
    }, 800).animate({
        opacity: 0
    }, 300);

    $("div").promise().done(function () {
        $('.timeout').fadeTo(100, 0, function () {
            $(".timeout").css('visibility', 'hidden');
        });
    });

    $(".dimbackground-curtain").delay(1200).fadeOut(1000);
    updateUserState(ui, state, id);
}, 3100);

/*************************************************************************
*     User clicks OK
**************************************************************************/

$(".okay").on("click", function () {
    clearTimeout(timeoutId);
    $(".really").replaceWith('<div class="really">Confirmed.</div>');
    $('.cancel').fadeTo(300, 0, function () {
        $(".cancel").css('visibility', 'hidden');
    });

    $(".okay").animate({
        marginRight: "-=300px"
    }, 800).animate({
        opacity: 0
    }, 300);

    $("div").promise().done(function () {
        $('.timeout').fadeTo(100, 0, function () {
            $(".timeout").css('visibility', 'hidden');
        });
    });

    $(".dimbackground-curtain").delay(1200).fadeOut(1000);
    updateUserState(ui, state, id);

});


/*************************************************************************
*     User clicks cancel
**************************************************************************/

$(".cancel").on("click", function () {
    clearTimeout(timeoutId);
    $(".really").replaceWith('<div class="really">Cancelled.</div>');
    $('.okay').fadeTo(300, 0, function () {
        $(".okay").css('visibility', 'hidden');
    });

    $(".cancel").animate({
        marginLeft: "-=300px"
    }, 800).animate({
        opacity: 0
    }, 300);

    $("div").promise().done(function () {
        $('.timeout').fadeTo(100, 0, function () {
            $(".timeout").css('visibility', 'hidden');
        });
    });

    $(".dimbackground-curtain").delay(1200).fadeOut(1000);

});

我尝试过的事情：

此处有类似的帖子，其中一个是“jQuery .on() only works once”，建议使用委托。我尝试使用 .delegate（），。 live（）和 .one（）。在阅读了一些文档之后，我还提供了.off（）方法，我在不同的地方尝试过，包括在链的顶部。我知道这可能是我想念的非常简单的事情。

Answer 1

由于某些安全问题''仅在dom初始加载时包含的元素上才能正常运行。尝试将您的电话更改为：

$('#containerElement').on('click', '.okay', function(){
    //click event code
});

其中containerElement是添加此代码的元素，并且在最初加载页面时存在。

由于看起来您正在添加和删除确认横幅，因此您可能希望拥有一个永久性容器，可以在包含您的确定按钮的可见和隐藏之间切换。

这是一个解释问题的小提琴： http://jsfiddle.net/z3vk12mz/1/

Answer 2

我正在将容器div淡化为0而从未重置。

 $("div").promise().done(function () {
        $('.timeout').fadeTo(100, 0, function () {
            $(".timeout").css('visibility', 'hidden');
        });
    });

将其添加到代码顶部修复了问题：

$(".timeout").delay(1000).css('visibility', 'visible');
$(".timeout").css('opacity', '1');

$(".okay").delay(1000).css('visibility', 'visible');
$(".okay").css('opacity', '1');
$(".okay").css('margin', 'initial');

$(".cancel").delay(1000).css('visibility', 'visible');
$(".cancel").css('opacity', '1');
$(".cancel").css('margin', 'initial');

jQuery .on（）仅在第一次工作

2 个答案: