AJAX頁面加載后，JavaScript停止工作

Question

基本問題是...

我的網站設置如下：

<player> // A fixed div that contains JPlayer and it's playlist
<main> // all content in here is ajaxed including the links to mp3's for the player

基本上，一切正常，直到您單擊加載新頁面的鏈接，此時JPlayer拒絕再加載任何歌曲，並且JQuery自動完成功能（在搜索框中）停止工作。

您能否看一下該站點，看看是否可以知道導致Ajax加載后腳本失敗的原因？

要查看實際問題：

1）點擊此鏈接-http://bit.ly/ajaxtest

2）單擊頁面上任何曲目上的播放按鈕

3）播放歌曲后，單擊“最受歡迎的發行”部分中的專輯封面

4）新頁面將被加載，Jplayer將繼續不間斷地播放，但是新頁面上的播放鏈接和自動完成功能將不再起作用，除非您按下刷新按鈕以重新加載整個網站（這顯然不是我想要的目標）因為首先要把這東西頂掉）

提前謝謝了，

G ;）

Answer 1

當您刪除舊“頁面”的DOM片段時，您還將同時刪除綁定到其中的元素的所有事件處理程序。

有兩個選項可以解決此問題：

1. 委派您的事件處理程序，以便它們在頁面更改中幸免於難； 在jQuery中，它看起來像$(document).on('click', '.play', ...)而不是$('.play').on('click', ...)

2. 或者，您可以在插入新的“頁面”后將事件重新綁定到新的“頁面”，即，在ajax調用完成且新的“頁面”位於DOM中之后，運行事件綁定設置並再次初始化插件