Turbolinks打破jQuery的是在多個頁面上

我看着修復使用，大多說使用以下命令：Turbolinks打破jQuery的是在多個頁面上

var ready; 
ready = function() { 

// code here 

}; 

$(document).ready(ready); 
$(document).on('page:load', ready);

的問題是，在每一頁上我有一個HTML5視頻，我用jQuery的啓用點擊播放/用下面的代碼暫停：

$('#support-vid').click(function() { 
    $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); 
});

但是會發生什麼情況是，在第一頁上的視頻工作正常，jQuery的執行，因爲它應該是。雖然當我去另一個頁面時，它不起作用。我必須努力刷新才能使其正常運行。

什麼是最好的管理方式？

來源

2015-09-19 C. Short

那麼，你需要使用發佈在你的問題上的解決方案。 0_o – BroiSatse

伴侶，你有可能放棄一個鏈接嗎？除了廣告之外，我的問題上面沒有顯示任何內容！ –

我的意思是後面的部分：'我查看了修復程序，其中大多數人都說要使用以下內容：';） – BroiSatse

var ready = function() { 
// code here 
}; 

$(document).on('ready page:load', ready); 

$(document).on('click', '#support-vid', function() { 
    var my_element = $(this).get(0); 
    my_element.paused ? my_element.play() : my_element.pause(); 
});

的問題是，當你綁定事件處理這樣

$('#support-vid').click(function()

您綁定此處理某些元素。當turbolinks重新加載頁面時，它將替換整個主體，因此用具有相同屬性的全新元素替換元素，在這種情況下爲ID。而你的事件處理程序將不會再次觸發。

有兩種方法可以解決這個問題：第一個叫做'事件委託'，當你的事件處理程序綁定到文件上時，它永遠不會像上面的代碼那樣替換和使用過濾器。第二種方法是在每個頁面ready事件和turbolinks頁面重新綁定事件處理程序：加載事件是這樣的：

var ready = function() { 
    // code here 
    $('#support-vid').click(function() { 
     $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); 
    }); 
}; 

$(document).on('ready page:load', ready);

來源

2015-09-19 16:27:43 greenif

您應該花一些時間來解釋您的解決方案如何解決OP的問題。這些類型的僅用於代碼的答案不一定能提供足夠的信息，表明某種方式或者爲什麼某種方式按照其方式工作。 – MarsAtomic

這個答案可能有一個JavaScript/jQuery的解決方案......

然而，問題的關鍵在於在Turbolinks ...

有兩種方法在這樣的場景中去：

1：不要在你的佈局跟蹤的JavaScript代碼，定義你想要的行爲......因此，某處時，內您的文檔的210節中，<%= yield %>部分之後，也許，你可以做到以下幾點：

<script type="text/javascript" data-turbolinks-eval=true> 
    $(function() { 
     $('#support-vid').on('click',function() { 
      $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause(); 
     }); 
    }); 
</script>

這樣，腳本標籤將被迫在每一頁上的負載進行評估...... data-turbolinks-eval=true是腳本的默認行爲與隱式類型設置爲"text/javascript"，所以你不需要寫它......然而，你需要寫type="text/javascript"。

第二種方法是禁用導致問題的視圖上的turbolinks，但我不會那樣做。

來源

2015-09-19 19:01:34

Turbolinks打破jQuery的是在多個頁面上

回答

相關問題