jQuery .on() 仅在第一次工作

首先，我承认我是jQuery的新手，我很清楚这不是一个新问题。搜索后，我看到许多类似的帖子，但是我已经尝试了这些帖子中的解决方案，但它们没有产生积极的结果。我在底部添加了我尝试过的一些事情的列表。

到目前为止它是如何工作的...

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

该应用程序从数据库中获取员工姓名，并使用 ASP.NET 中继器在屏幕上为每个员工创建一个框。然后，可以将这些框拖放到包含 jQuery 可放置对象的浮出控件中，这些浮出控件将根据他们放入的框更新数据库中的员工状态。这一切都是100%好的。

问题...

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

第一次尝试将一个盒子放入拖放区时一切正常，我的意思是 100% 符合预期，包括记录数据库的状态更改。然后，对于之后的每次下降，只有超时功能有效，确定和取消按钮根本不显示在屏幕上，但 3 秒后超时功能确认操作并将所需的状态更改记录到数据库中。

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

默认.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...

应用程序.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（）方法，我已经在各个地方尝试过，包括在链的顶部。我知道这可能是我错过的非常简单的东西。

由于一些安全问题，"on"仅在最初加载时在 dom 中包含的元素上真正正常运行。尝试将呼叫更改为以下内容：

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

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

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

这里有一个小提琴可以说明这个问题：http://jsfiddle.net/z3vk12mz/1/

我将容器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');

相关内容

最新更新

热门标签：