Javascript 在使用涡轮链接提交表单后不会在没有刷新的情况下运行



我有一些javascript在按钮上放置点击处理程序(例如)。因为当用户第一次访问应用程序时,这些按钮并不存在,比如在"首页"。页,我听这样:$(document).on('turbolinks:load', initializeButtons);。当用户从"首页"进入页面时,这种方法就有效了。页面(按钮不存在的地方)到"搜索"页面。当"搜索"时当这些按钮存在时,initializeButtons再次运行。

关于"搜索"页面,在用户单击"搜索"后,发出POST并使用其魔力(替换初始化的按钮)链接更新页面。我如何侦听这个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实现替换了元素之后,您将需要重新初始化它们。正如max在他的回答中提到的,涡轮链接不涉及页面生命周期的这一部分。相反,您应该监听ajax:complete,例如,在提交元素上(在本例中是id est<a>)。当然,事情没那么简单。如果监听ajax:complete,则永远不会调用事件处理程序,因为在事件触发时,元素已经被替换了。相反,监听ajax:start,然后直接在XHR上注册complete事件。这样,在替换锚元素之后,事件处理程序将绑定到仍然存在的XHR。像这样的代码应该做:

$(document).on('ajax:send', '#parent-container > a', (event, xhr) => {
xhr.complete(()=>initializeTheStuff());
});

最新更新