Ruby on Rails - 動態生成的部分中的JavaScript

我知道將JavaScript放入partials中是一個壞主意，因爲每次加載新的部分時，頁面都必須加載新腳本。我知道並已閱讀this question，但其答案對我來說並不適用（將腳本放入app/javascripts/application.js中）。我認爲這是因爲我正在處理在頁面上動態生成的偏分量。我認爲動態生成的部分對初始頁面加載的腳本沒有反應。Ruby on Rails - 動態生成的部分中的JavaScript

例如，我有一個帶有選擇輸入的「Rule」div，該選擇輸入有一個腳本，用於在選擇輸入更改時執行某些操作。這適用於在頁面加載時生成的每個規則div。但是還有一個「+」或「ADD」按鈕，它將動態生成更多的規則div，這些規則div不會對腳本做出響應，除非該腳本處於部分腳本中。

當部分動態生成時，是否有一種好方法可以讓腳本脫離局部？

來源

2014-12-29 Isaac

JQuery的設置在頁面加載（即$(selector).on(etc.)）監聽器，因此它不偵聽動態添加元素事件。儘管如此，還是有辦法的。你需要使用所謂的委託。

$(document).ready(function() { 
    $('body').on('change', 'input.selector', function(e) { 
     // do something 
    }); 
});

我不知道您的活動（在這裏我把change）或選擇您所使用的選擇（這裏我把input.selector），但如果更換這些相應的信息，它應該連工作動態添加元素。

來源

2014-12-29 16:19:20 ptd

好的，所以我猜測事件委託與使用body有關（與動態生成的div相對）。所以'身體'知道它的選擇元素做了一些改變，添加它們並不重要。那是對的嗎？ ...不幸的是，你的代碼不適合我。我逐字複製了它，除了我改變了「做某事」到console.log（「hello」）;但我無法獲得「你好」的記錄。 – Isaac

你有正確的想法。我粘貼的代碼將不會工作，除非你正在觀察類選擇器的輸入，我想你不是。將'input.selector'替換爲您想要觀察變化的輸入的選擇器。 – ptd

對不起！在回到這個之前，我必須處理更高優先級的事情。現在我不知道如何替換input.selector，我感到很無聊。還有一件事情，有必要讓偵聽器在$（document）.ready（function（）{}）中;現在，我的動態部分效果非常好。謝謝！ – Isaac

您可以使用jQuery來執行該文件已加載到DOM後才代碼：

$(document).ready(function() { 
    //Call your functions here 
});

這樣，你的JS將有機會獲得無論是在頁面上，因爲你是確保它已完全加載。

如果您的div在文檔準備就緒上不存在，您可以使用事件委派，如ptd所示。基本上這意味着你在父div上安裝一個處理程序（它將在文檔準備就緒中），它說：「嘿，當你點擊我內部的這個動態div時，調用這個函數」。

$('div#master').on('click', 'div.dynamic', function(event) { 
    console.log("action here") 
    var $dynamicDiv = $(event.currentTarget) //The current Target is the thing you clicked on, not the parent. 
});

來源

2014-12-29 16:10:11

這不起作用:(只是試圖確認它不能正常工作，當文檔「準備就緒」時，動態生成的div實際上並不在頁面上。用戶按下一個按鈕 – Isaac

聽起來就像你已經有了一個事件處理程序，當用戶點擊一個按鈕時，同時你應該在你放在頁面上的div上安裝另一個事件處理程序。 new_div「）.on（」click「，function（）{//在這裏安裝新的處理程序}） –

這不會爲每個新div的處理程序添加一個腳本嗎 – Isaac

Ruby on Rails - 動態生成的部分中的JavaScript

回答

相關問題