我加载另一个页面后JavaScript停止工作

Question

I am new to JavaScript and trying to see why my on event listeners are not working. 我是JavaScript的新手，试图了解为什么on事件监听器无法正常工作。 I have found similar posts on stackoverflow however the solutions are not working for me. 我在stackoverflow上找到了类似的帖子，但是该解决方案不适用于我。

var search = function( event ) {
    alert("bobo")
   $.get("http://localhost:3000/search", {"search" : $("#Search-Bar").val()}, function(data, status){
        if(status == "success")
           $(".centering.text-center").html(data)
    })
}

var attachListeners = function(){
    $("#Search").on("click", search)
    $("#SearchIcon").click( () => search() )
    $("#Search-Bar").keypress( event => (event.KeyCode == 13 || event.which == 13) ? search() : undefined )
}

$(document).ready( function(){ 
    attachListeners()
})

My website is not a single page application. 我的网站不是单页应用程序。 I have attached the listeners to my navigation search bar where I load a different view through the nav links and my server(ruby back end) uploads a new html page. 我已将侦听器附加到导航搜索栏，在导航栏上通过导航链接加载不同的视图，并且我的服务器（红宝石后端）上载了新的HTML页面。

On the first load I have noticed that document ready gets called and everything else works. 在第一次加载时，我注意到准备就绪的文档会被调用，其他所有内容都会起作用。 The on and click. 在并单击。 After I use my navigation and load a different html page my events disappear. 使用导航并加载其他html页面后，事件消失了。 In my html views my searchbar, searchicon, and a search text have consistent id 's through out. 在我的html视图中，我的搜索栏，searchicon和搜索文本的id始终一致。 I have tried using window.load() and putting an onload attribute for my body <body onload=attachListeners()> but neither worked(perhaps I didn't use them properly). 我试过使用window.load()并为我的主体添加一个onload属性<body onload=attachListeners()>但都没有起作用（也许我没有正确使用它们）。 I also noticed that when I render the next html views my docment.ready does not get called. 我还注意到，当我渲染下一个html视图时，不会调用docment.ready 。 However, if I forcefully refresh the page with an F5 the listeners are active again for that one html page. 但是，如果我用F5强制刷新页面，则该HTML页面的侦听器将再次处于活动状态。 What am I missing here that I don't understand? 我在这里想念的我不知道的是什么？

Answer 1

It looks like you might be using Turbolinks , from the Readme for the project: 看来您可能正在使用自述文件中的Turbolinks ：

When you follow a link, Turbolinks automatically fetches the page, swaps in its <body>, and merges its <head>, all without incurring the cost of a full page load. 当您跟踪链接时，Turbolinks会自动获取页面，交换其<body>并合并其<head>，而所有这些都不会产生加载整个页面的费用。

Since this library makes it so the page ever only loads once, normal javascript window.onload , DOMContentLoaded , and jQuery ready events don't function after the initial page load and you have to use 由于使用该库，因此页面只能加载一次，因此普通的javascript window.onload ， DOMContentLoaded和jQuery ready事件在初始页面加载后不起作用，您必须使用

document.addEventListener("turbolinks:load", function() {

instead of those. 而不是那些。 If you're new to turbo links, I suggest reading through that README to see what it's all about. 如果您不熟悉Turbo链接，建议您通读该自述文件以了解其全部内容。

I've never understood why the Rails team would put something like this in rails and enable it by default, and in every single project I've made since they made that change the first thing I do is uninstall it, and when I forgot to do so, I spend several hours later in the project wondering why my javascript is broken. 我从来不明白为什么Rails团队会在Rails中放置这样的东西并默认启用它，并且在我所做的每个项目中，自从他们做出更改后，我要做的第一件事就是卸载它，而当我忘记这样做，我在项目中花了几个小时之后，想知道为什么我的JavaScript损坏了。

我加载另一个页面后JavaScript停止工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-11-15 05:50:44

我加载另一个页面后JavaScript停止工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-11-15 05:50:44

解决方案1
1 已采纳 2017-11-15 05:50:44