jQuery .on（）仅在第一次使用

首先，我无疑是jQuery的新手，我知道这不是一个新问题。在搜索后，我看到了许多类似的帖子，但是我尝试了这些帖子中的解决方案，但它们没有得到积极的结果。我在底部添加了一些我尝试过的东西的列表。

到目前为止如何运作...

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

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

问题...

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

第一次将一个盒子放到放置区中，一切都正常，我的意思是100％符合预期，包括将状态记录到数据库中。然后，对于每次删除之后，只有超时功能起作用，“确定”和“取消”按钮完全不会显示在屏幕上，但是3秒钟后，超时功能会确认操作，并将所需的状态更改记录到数据库中。

我的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（）仅可使用一次”，建议使用委托。我试着用.delegate（） 。live（）和.one（）。在阅读了一些文档之后，我还包括了.off（）方法，我已经在各种地方尝试过了，包括在链的顶部。我知道这可能是我所缺少的非常简单的东西。