Javascript未在所有Turbolink页面加载时触发

问题描述

我有一些不是在所有turbolinks页面加载中都触发的javascript。如果您导航到该页面，则不会触发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);
    });
});

建议？

解决方法

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

$(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。问题解决了。