Question

我有代码在页面加载时设置eventListener。 eventListener第一次正常工作。

我点击eventType，事件会按预期触发。但是，当我点击导航栏时，＃34; home＆＃34;按钮重新开始。 addEventListener未设置，即使单击，事件也不会触发。

我已经考虑过删除eventListener并重新添加它们，但我认为这不是最佳解决方案。

我做错了什么？

  <ul id='listOfEventTypes'>
    <% @event_type.each do |type| %>
      <div data-event-type='<%= type['name'] %>' class="col-lg-4" id='eventType'>
        <li> <%= type['name'] %></li>
      </div>
    <% end %>
  </ul>

(function() {
  function init() {
    bindEvents();
  }

  function bindEvents() {
    var eventType = document.getElementById('listOfEventTypes').children;

    for (var i = 0; i < eventType.length; i++) (function(n){
     eventType[n].addEventListener('click', function() {
        console.log('what happened here');
     }, false);
    })(i);
  };
  $(document).ready(function() {
    init();
  });

})(jQuery);

修改

添加了html

Answer 1

似乎你正在使用rails，你最好解释项目结构特别是javascript文件的位置。我认为您的问题来自Turbolinks：

Turbolinks可以更快地在您的Web应用程序中建立以下链接。 不是让浏览器在每个页面更改之间重新编译JavaScript和CSS，而是让当前页面实例保持活动状态仅替换头部中的正文（或部分）和标题。想想CGI与持久性过程。

根据文档，您的javascript代码可能不会第二次运行。

以及你应该在你的函数中得到jQuery：

(function($) {...

AddEventListener在页面重新加载时不会重新启动

1 个答案: