Question

我是JavaScript的新手，并试图了解为什么我的事件监听器无法正常工作。我在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()
})

我的网站不是单页应用程序。我已经将监听器连接到我的导航搜索栏，在那里我通过导航链接加载了不同的视图，我的服务器（ruby back end）上传了一个新的html页面。

在第一次加载时，我注意到文档就绪被调用，其他一切都有效。点击，然后点击。在我使用导航并加载不同的html页面后，我的事件消失了。在我的html视图中，我的搜索栏，搜索图标和搜索文本具有一致的id。我尝试过使用window.load()并为我的身体<body onload=attachListeners()>添加一个onload属性但是没有用（也许我没有正确使用它们）。我还注意到，当我渲染下一个html视图时，我的docment.ready没有被调用。但是，如果我使用F5强制刷新页面，则侦听器将再次为该一个html页面激活。我在这里想念的是什么，我不明白？

Answer 1

看起来您可能正在使用项目自述文件中的Turbolinks：

当您关注链接时，Turbolinks会自动提取页面，在其＆lt; body＆gt;中进行交换，并合并其＆lt; head＆gt;，而不会产生整页加载的费用。

由于此库使页面只加载一次，因此正常的javascript window.onload，DOMContentLoaded和jQuery ready事件在初始页面加载后无法正常运行你必须使用

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

而不是那些。如果您对turbo链接不熟悉，我建议您阅读README，了解它的全部内容。

我从来没有理解为什么Rails团队会在rails中添加这样的东西并在默认情况下启用它，并且在我做出改变之后我所做的每一个项目中我做的第一件事就是卸载它，当我忘记这样做时，我花了几个小时后在项目中想知道为什么我的javascript被破坏了。

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

1 个答案: