我是否錯誤地使用了Jquery.ready（）？

對於Jquery的就緒事件塊，文檔說：我是否錯誤地使用了Jquery.ready（）？

的。就緒（）方法一般是與屬性不兼容。如果必須使用加載，請不要使用.ready（）或使用jQuery的.load（）方法將加載事件處理程序附加到窗口或更具體的項目（如圖像）。

這

$(function() { 
    // Handler for .ready() called. 
});

在我爲Rails的CoffeeScript文件，我傾向於遵循這個模式：

$ -> 
    $("body.controller_name").ready -> 
    $(".button_group").change (evt) -> 
     alert("do something")

，如果我需要委派，這將是一個元素的結合創建並不在最初的html中，我傾向於這樣做。

$ -> 
    $("body.controller_name").ready -> 

    $('.button_group').change (evt) -> 
     alert("do something") 


    $(document).on 'change', '.button_group', (event) -> 
     alert("do something")

當檢查出turbolinks.jquery寶石，我遇到了這樣一個字條：

/* BAD: don't bind 'document' events while inside $()! */ 
$(function() { 
    $(document).on('click', 'button', function() { ... }) 
});

所以這讓我想知道，我已開始就錯了做什麼呢？我應該避免在ready塊中使用$(document).on()嗎？如果是這樣，除turbolinks.jquery可能的衝突之外是有原因爲什麼這是錯誤的？

那麼什麼是正確的模式？我熟悉等待資產通過使用加載塊而不是就緒塊進行加載，但我不確定我是否知道我一直在做錯的事情。

來源

2014-01-18 Ashley Raiteri

如果您在頭部添加腳本以等待DOM加載，則需要document.ready。您可以簡單地在結束標記之前加載正文中的所有內容。 – elclanrs

我絕對不這樣做。我通常在Rails或類似的環境中進行編程，所以我使用了一個資產管道，其中包括我的後編譯後的coffeescript文件幷包含在頭文件中。在本練習的上下文中，我具體詢問在jquery.ready事件中包含'$（document）.on（'event'，'selector'，function（）{...}）的問題是什麼？塊？ –

剛剛檢查了TurboLinks文檔，不確定爲什麼它很重要，是否給出了任何問題？我沒有聽說過這種不好的做法，但也許TurboLink可能會不止一次地觸發準備好的事件...... – elclanrs

是的，沒有。

我沒有理由避免在ready事件中的文檔級綁定事件，如果您需要它們的話。

但是，如果可以提供幫助，您應該避免在文檔級綁定代理。您應該使用盡可能接近發生事件的元素的元素。每當事件發生在綁定它的元素內時，它必須檢查事件發生的元素是否與選擇器匹配，所以如果綁定委託在文檔級別上，那麼必須爲每個發生在任何位置的事件完成該工作在頁面中。

的live方法做了綁定代表在文檔級別，現在該方法是從jQuery的除去和通過delegate方法（其現在由on方法取代）取代，因爲通常應結合在一個較小範圍的代表。

從文檔不談論你在ready事件做，它談到了<body onload="">屬性的報價。當您在jQuery中使用ready或load事件時，不應該使用它。

來源

2014-01-18 21:53:36 Guffa

[「從jQuery 1.7開始，'.delegate（）'已被'.on（）'方法取代。「]（http://api.jquery.com/delegate/） –

@ muistooshort：我看你怎麼會感到困惑......我糾正了我的拼寫錯誤。 – Guffa

因此，我已經使用'$（selector）.on（event，selector，function）'調整了我的綁定，使它們都在jQuery就緒事件之外，並儘可能地與已有元素綁定。我仍然需要重新啓用turbolinks並查看這是否全部按預期工作。從文件的報價是在與報價一起麪包https://github.com/kossnocorp/jquery.turbolinks 如果它指的是匿名風格的jQuery準備塊 –

我是否錯誤地使用了Jquery.ready（）？

回答

相關問題