Javascript 执行不可靠 – RoR4答案

【问题标题】：Javascript not executing reliably – RoR4Javascript 执行不可靠 – RoR4
【发布时间】：2017-02-14 22:22:05
【问题描述】：

我遇到了一个问题，我使用 javascript 来选中所有/取消选中所有复选框，但是我从另一个 URL 导航到一个页面，它不会提交表单。当我刷新页面或直接输入 URL 时，它将起作用。我认为这可能是一个 turbolinks 问题，但是我对网站上的任何其他 javascript 都没有问题。在加载完其他所有内容之后，我正在页面末尾加载 JS。

我的代码如下：

    $(document).ready(function(){
    var checkboxes = $("input[type='checkbox']");
    if(checkboxes.prop("checked")){
        document.getElementById("check_all").innerHTML = "Deselect All";
    }
    else {
        document.getElementById("check_all").innerHTML = "Select All";
    }
   $('#check_all').on("click", function() {
    if(checkboxes.prop("checked")){
        checkboxes.prop("checked",false);
        document.getElementById("check_all").innerHTML = "Select All";
    }
    else {
        checkboxes.prop("checked",true);
        document.getElementById("check_all").innerHTML = "Deselect All";
    }
  });
});

我使用的是 Rails 4，有时我会收到如下错误： 未捕获的类型错误：无法将属性“innerHTML”设置为 null

【问题讨论】：

确保您的 JS 脚本元素位于页面底部，或者代码位于 onload 事件中。否则，当代码执行时，您所定位的元素可能不存在。

标签： javascript jquery ruby-on-rails ruby-on-rails-4

【解决方案1】：

很可能是 Turbolinks 问题。

$(document).ready 事件的处理程序中的代码在页面加载到足以在 DOM 上执行 JS 操作时触发。对于这类事情，这通常是正确的做法，但使用 Turbolinks 就不同了。

Turbolinks 拦截链接点击，而不是重新加载页面，它对所需页面的正文发出 AJAX 请求，并将其换成当前页面的正文。这使得$(document).ready 事件不可靠——它可能不会被触发。因此，Turbolinks 在更改页面内容时会触发一个事件：page:change

而不是

$(document).ready(function(){

使用

$(document).on('page:change', function () {

【讨论】：