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

Question

First, I am admittedly new at jQuery and I know very well this isn't a new question. Upon searching I see many similar posts like this, but I've tried the solutions from those posts and they bear no positive result. I've added a list of some of the things I've tried at the bottom.

How it works so far...

I'm working on a single page application in ASP.NET and jQuery. I use web methods in my Default.aspx.cs to integrate with C# and my database.

The application takes employees names from a database and creates a box on the screen for each employee using an ASP.NET repeater. Those boxes can then be dragged and dropped into flyout containing jQuery droppables which will update the employees state in the database based on which box they drop in. This all works 100% fine.

The Problem...

I'm trying to add a cancellable timeout feature so a person can cancel their interaction before it commits to the database.

Everything works fine for the first attempt to drop a box in a dropzone, by fine I mean 100% as expected including logging state changes to the database. Then for each drop after that only the timeout feature works, the okay and cancel buttons don't show up on the screen at all, yet after 3 seconds the timeout feature confirms the action and the desired state change is logged to the database.

My jQuery script is fairly lengthy (like this post (sorry)) so I'm going to try and share only the most relevant portion of code, hopefully it will be enough for you to provide some insight.

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 (code in question)

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

});

---

Things I've tried:

There are similar posts to this, one being " jQuery .on() only works once ", which suggest using a delegate. I tried using .delegate() , . live() and .one() . After reading some documentation I've also included the .off() methods, which I've tried in various places including at the top of the chain. I know this is probably something really simple that I'm missing.

Answer 1

Due to some security concerns 'on' only really functions properly on elements that are included in the dom when it's initially loaded. Try changing your call to this:

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

Where containerElement is the element that this code is being added to and is present when the page is initially loaded.

Since it looks like you're adding and removing the confirmation banner you may want to have a permanent container that toggles between being visible and hidden which contains your ok button.

Here's a fiddle that sort of illustrates the problem: http://jsfiddle.net/z3vk12mz/1/

Answer 2

I was fading the container divs to 0 and never resetting it .

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

adding this to the top of the code fixed the issue:

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