我有一些javascript(1)監測導航#元素上的點擊，而且效果很好。這是一個基本的$('#element').click(function()).
。然而，我有一些其他javascript(2)來 "渲染 "導航元素中的內容，基本上是重繪 它。在我看來，輸出的 HTML 與初始 HTML 完全相同，也就是說，我并沒有從根本上破壞。
一旦這個 JavaScript (2) 執行，并再次呈現導航，我的原始 JavaScript (1) 就不再起作用了。
$(document).ready()中是否有我需要了解的內容？當render發生時，它是否依附于那些不一樣的物件？我是否需要使用 $(document).ready() 以外的東西，或者我是否也需要重新加載 JavaScript？
我在這里有什么誤解嗎？
作為參考，這是我的基本代碼，其中application.html渲染了_nav模板：
application.html.erb
<%= content_tag "nav"/span>, id: "stages-nav", data: {progress_overall: @progress_overall}。do %>
<%=渲染'home/nav', current_progress: @progress_overall %>
<%結束%>。
_nav.html.erb
<ul class="navbar-nav me-auto mb-2 mb-lg-0" >
< li class="nav_item"/span> id="business_costs_nav_item"/span>> <a href="javascript: void(0);"><span class="small"> 第二步。</span>商業成本< /a></li>
< li class="nav_item"/span> id="wedding_costs_nav_items"/span>> <a href="javascript: void(0);"><span class="small"/span>>步驟3: </span>婚禮費用< /a></li>
...等
</ul>
application.js
$(document).ready(function(>/span>) {
//business costs（業務費用）。
$('#business_costs_nav_item').click(function() {
slide_current_to_new('business_costs')
})
});
上述所有作業都正常。
然而，在我的應用程式的其他地方，這里是渲染 #stages-nav 的 js：
show_updated_view.js.erb//更新stages-nav以提供我當前的進度。
$('#stages-nav').html("<%= escape_javascript(render('home/nav', current_progress: progress ) %> ")。
我仔細檢查了上述程式運行后的HTML輸出，它看起來與運行前完全一樣，所以非常確定我沒有對我的頁面進行格式化。如果我做的這個渲染不正確，我很想知道，但對我來說看起來還不錯。
我猜測這一定是$(document).ready的問題，但我希望能得到一些幫助！
uj5u.com熱心網友回復：
你的代碼是在檔案準備好被操作時，直接將一個事件處理程式附加到元素上。由于您的 js.erb 檔案中的元素是通過 AJAX 呼叫添加到 DOM 中的，因此它們沒有附加的事件處理程式。
這并不是 Rails 所特有的，只要您將元素動態地添加到 DOM 中，就會出現這種情況。解決方案是使用event delegation：
$(document)。 on('click'/span>, '#business_costs_nav_item'/span>, function() {
slide_current_to_new（'business_costs'）。
});
這將捕捉到點擊事件，因為它冒出了DOM的頂部，并與動態插入的元素一起作業。這段代碼不需要包裹在jQuery.ready處理程式中，因為它沒有直接將事件處理程式附加到元素上。
在vanilla JS中的等價物是:
document. addEventListener('click', (event) => {
if (! event.target.matches('#business_costs_nav_item')){
return;
}
slide_current_to_new（'business_costs'）。
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/307017.html
標籤：