Javascript 未在所有 turbolinks 页面加载时触发答案

【问题标题】：Javascript not firing on all turbolinks page loadsJavascript 未在所有 turbolinks 页面加载时触发
【发布时间】：2020-10-06 17:58:03
【问题描述】：

我有一些 javascript 没有在所有 turbolinks 页面加载时触发。如果您导航到该页面，javascript 将不会触发。如果您刷新，javascript 将正常工作。点击刷新后返回页面也可以正常工作。

这是我的看法：

<%= javascript_pack_tag 'reports' %>
<h1>CSV Report</h1>
<div class="form-group row">
    <div class="col-2 col-form-label col-form-label">Start Date</div>
    <div class="col-3"><%= date_field_tag 'start_date', '',class: "form-control" %></div>
</div>
<div class="form-group row">
    <div class="col-2 col-form-label">End Date</div>
    <div class="col-3"><%= date_field_tag 'end_date', '',class: "form-control" %></div>
</div>
<div class="form-group row">
    <div class="col-2"><button id="get_csv" class="btn btn-primary">Get CSV</button></div>
</div>

这是我的 javascript：

document.addEventListener("turbolinks:load", function() {
    $(document).on('click','#get_csv',function(e){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        if ( start_date == '' || end_date == '' || start_date > end_date ) { return; }
        document.location = '/reports/csv/download?start_date=' + start_date + '&end_date=' + end_date;
        //console.log( '/reports/csv/download?start_date=' + start_date + '&end_date=' + end_date);
    });
});

建议？

【问题讨论】：

标签： javascript ruby-on-rails turbolinks

【解决方案1】：

仔细阅读 turbolinks 文档，我发现我误解了如何使用事件委托。您不应该将您的事件委托放入监听 turbolinks:load 事件的 eventListener 中。您只需要在整个站点范围内绑定一次。所以我搬家了

$(document).on('click','#get_csv',function(e){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        if ( start_date == '' || end_date == '' || start_date > end_date ) { return; }
        document.location = '/reports/csv/download?start_date=' + start_date + '&end_date=' + end_date;
        //console.log( '/reports/csv/download?start_date=' + start_date + '&end_date=' + end_date);
    });

到 application.js 并删除了 records.js。问题解决了。

【讨论】：