Javascript 不会 运行 使用 Turbolinks 提交表单后不刷新
Javascript doesn't Run Without Refresh After Submitting Form Using Turbolinks
我有一些 javascript 将点击处理程序放在按钮上（例如）。因为当用户第一次访问应用程序时，这些按钮不存在，比如说，“主页”页面，我这样听：$(document).on('turbolinks:load', initializeButtons);。当用户从“主页”页面（按钮不存在）转到“搜索”页面时，这会起作用。加载“搜索”页面后，如果这些按钮确实存在，initializeButtons 将再次运行。
在“搜索”页面上，用户单击“搜索”后，会发出 POST 并且 turbolinks 使用其替换已初始化按钮的魔法更新页面。我如何侦听此 POST 事件，以便我可以重新初始化需要完成的按钮（和其他初始化）？
要初始化按钮，请使用 $(document).on(event, selector, func)；例如，$(document).on('click', '#add_row_button', add_row_func);。使用此方法，任何时候 'click' (sicut exemplar gratia) 事件，jquery 将检查 DOM 您提供的选择器并路由事件在事件发生时而不是在注册时发送到适当的元素。这样，您的事件处理程序就不会绑定到 Rails 的非侵入式 javascript 实现（稍后会详细介绍）将要删除的元素，并且动态事件处理将找到新元素jquery 确实如此。
关于其他插件的初始化，首先要注意的是没有发出POST。您的 <link_to ... remote:true/> 链接实际上发出了 XHR 请求。在收到这样的请求并在 Rails 的非侵入性 javascript 实施替换了您的元素之后，您将需要 re-initialize 它们。正如 max 在他的回答中提到的那样，turbolinks 不参与页面生命周期的这一部分。相反，您应该监听 ajax:complete，例如，在提交元素上（在本例中为 id est <a>）。当然，事情并没有那么简单。如果您监听 ajax:complete，事件处理程序将永远不会被调用，因为在事件触发时，您的元素已经被替换。相反，监听 ajax:start，然后直接在 XHR 上注册 complete 事件。这样，在您的锚元素被替换后，您的事件处理程序就会绑定到仍然存在的 XHR。应该这样做：
$(document).on('ajax:send', '#parent-container > a', (event, xhr) => {
xhr.complete(()=>initializeTheStuff());
});
我有一些 javascript 将点击处理程序放在按钮上（例如）。因为当用户第一次访问应用程序时，这些按钮不存在，比如说，“主页”页面，我这样听：$(document).on('turbolinks:load', initializeButtons);。当用户从“主页”页面（按钮不存在）转到“搜索”页面时，这会起作用。加载“搜索”页面后，如果这些按钮确实存在，initializeButtons 将再次运行。
在“搜索”页面上，用户单击“搜索”后，会发出 POST 并且 turbolinks 使用其替换已初始化按钮的魔法更新页面。我如何侦听此 POST 事件，以便我可以重新初始化需要完成的按钮（和其他初始化）？
要初始化按钮，请使用 $(document).on(event, selector, func)；例如，$(document).on('click', '#add_row_button', add_row_func);。使用此方法，任何时候 'click' (sicut exemplar gratia) 事件，jquery 将检查 DOM 您提供的选择器并路由事件在事件发生时而不是在注册时发送到适当的元素。这样，您的事件处理程序就不会绑定到 Rails 的非侵入式 javascript 实现（稍后会详细介绍）将要删除的元素，并且动态事件处理将找到新元素jquery 确实如此。
关于其他插件的初始化，首先要注意的是没有发出POST。您的 <link_to ... remote:true/> 链接实际上发出了 XHR 请求。在收到这样的请求并在 Rails 的非侵入性 javascript 实施替换了您的元素之后，您将需要 re-initialize 它们。正如 max 在他的回答中提到的那样，turbolinks 不参与页面生命周期的这一部分。相反，您应该监听 ajax:complete，例如，在提交元素上（在本例中为 id est <a>）。当然，事情并没有那么简单。如果您监听 ajax:complete，事件处理程序将永远不会被调用，因为在事件触发时，您的元素已经被替换。相反，监听 ajax:start，然后直接在 XHR 上注册 complete 事件。这样，在您的锚元素被替换后，您的事件处理程序就会绑定到仍然存在的 XHR。应该这样做：
$(document).on('ajax:send', '#parent-container > a', (event, xhr) => {
xhr.complete(()=>initializeTheStuff());
});