jQuery .on（）僅適用於第一次

Question

首先，我承認jQuery的新功能，我很清楚這不是一個新問題。在搜索時，我看到許多類似的帖子，但我已經嘗試了這些帖子的解決方案，並沒有帶來積極的結果。我已經添加了一些我在底部嘗試過的東西。

它是如何工作至今...

我工作在ASP.NET和jQuery單頁的應用程序。我在我的Default.aspx.cs中使用web方法與C＃和我的數據庫集成。

應用程序從數據庫中獲取員工姓名，並使用ASP.NET轉發器爲每個員工在屏幕上創建一個框。然後可以將這些框拖放到包含jQuery droppables的彈出窗口中，該窗口將根據它們放入哪個框來更新數據庫中的僱員狀態。這一切都可以100％正常工作。

問題... ...

我想添加一個撤銷的超時功能，因此一個人可以取消它們之間的相互作用它提交到數據庫之前。

一切工作正常，第一次嘗試刪除一個盒子在一個dropzone，罰款我的意思是100％，如預期包括記錄狀態更改到數據庫。然後，對於之後的每次下降，只有超時功能才起作用，okay和cancel按鈕根本不顯示在屏幕上，但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() only works once」，建議使用代表。我嘗試使用.delegate（），。 （）live（） and .one（）。在閱讀了一些文檔之後，我還包括了.off（）方法，這些方法我已經在各種位置嘗試過，包括在鏈的頂部。我知道這可能是我錯過的很簡單的事情。

Answer 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'); 

Answer 2

由於某些安全問題'on'僅在最初加載時包含在dom中的元素上才真正正常工作。試着改變你的電話本：

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

哪裏containerElement是此代碼被添加到元素，並在最初加載頁面存在。

由於看起來您正在添加和刪除確認標語，因此您可能需要一個永久性容器，它可以在可見和隱藏之間切換，其中包含您的確定按鈕。

這裏的排序是說明該問題的小提琴：http://jsfiddle.net/z3vk12mz/1/