javascript - 为什么这个 JS 会触发部分呈现在一页上而不是另一页上的表单？

Question

我有一个如下所示的 posts.js 文件:

var ready;
ready = function() {

    var toggleSidebar = $(".togglesidebar");
    var primary = $("#primary");
    var secondary = $("#secondary");

    toggleSidebar.on("click", function(){

        if(primary.hasClass("col-sm-9")){
            primary.removeClass("col-sm-9");
            primary.addClass("col-sm-12");
            secondary.css('display', 'none');
        }
        else {
            primary.removeClass("col-sm-12");
            primary.addClass("col-sm-9");
            secondary.css('display', 'inline-block');
        }
    }); 
};

var counter = function(event) {
    var fieldValue = $(this).val();
    var wc = fieldValue.trim().replace(regex, ' ').split(' ').length;
    var regex = /\s+/gi;
    var $wcField;
    var maxWc;

    if ($(this)[0] === $('#post_title')[0]) {
      $wcField = $('#wordCountTitle');
      maxWc = 7;
    } else {
      $wcField = $('#wordCountBody');
      maxWc = 150;
    }

    $wcField.html(wc);
    $wcField.toggleClass('over-limit', wc > maxWc);
};

$(document).ready(ready);
$(document).on('ready page:load', function () {
    $('#post_title, #body-field').on('change keyup paste', counter);
});

在我的 application.html.erb 页面中，我有这个:

<div id="secondary" class="col-sm-3 sidebar" style="display: none;">
    <aside>
      <div class="about">
        <h4>Submit Report</h4>
            <%= render "posts/form" %>
        </div>
    </aside> 
</div>  <!-- /#secondary --> 

当我切换此 div 并显示 _form 部分时，JS 在这些字段中工作正常。

但如果我转到 posts/new 或 /posts/:id/edit，它不会。

即使我检查该页面的源代码，我也会看到其中包含的 post.js。

这可能是什么原因造成的？

编辑 1

如果重要的话，我正在使用 Turbolinks。

编辑2

根据答案中的建议，我试过了:

var ready;
ready = function() {

    // This is the Sidebar toggle functionality
    var toggleSidebar = $(".togglesidebar");
    var primary = $("#primary");
    var secondary = $("#secondary");

    $(document).on("click", ".togglesidebar", function(){       

        if(primary.hasClass("col-sm-9")){
            primary.removeClass("col-sm-9");
            primary.addClass("col-sm-12");
            secondary.css('display', 'none');
        }
        else {
            primary.removeClass("col-sm-12");
            primary.addClass("col-sm-9");
            secondary.css('display', 'inline-block');
        }
    }); 
};

但这并没有奏效。

我遇到的关键问题是“计数器”，即 #wordCountTitle 和 #wordCountBody 在我的 /posts/上不起作用新的，即使当 .toggleSidebar 被激活时它们在 posts/index 上工作。

Answer 1

与其直接绑定(bind)到需要仔细处理 Turbolinks 事件的元素的 onclick，不如在文档上使用事件处理程序，尝试更改直接事件

toggleSidebar.on("click", function(){

委托(delegate)事件

$(document).on("click", ".togglesidebar", function(){

如果您使用直接事件动态修改 DOM(如 Turbolinks 替换它时)，则需要重新分配它。

有关详细说明，请参阅 http://api.jquery.com/on/#direct-and-delegated-events

---

与第一个功能相同的是第二个功能。此外，对于委托(delegate)事件，“就绪”检查变得不必要。考虑到这一点，您的代码将变为:

$(document).on("click", ".togglesidebar", function(){

    var primary = $("#primary");
    var secondary = $("#secondary");

    if(primary.hasClass("col-sm-9")){
        primary.removeClass("col-sm-9");
        primary.addClass("col-sm-12");
        secondary.css('display', 'none');
    }
    else {
        primary.removeClass("col-sm-12");
        primary.addClass("col-sm-9");
        secondary.css('display', 'inline-block');
    }

}); 

$(document).on('change keyup paste', '#post_title, #body-field', function () {
    var fieldValue = $(this).val();
    var wc = fieldValue.trim().replace(regex, ' ').split(' ').length;
    var regex = /\s+/gi;
    var $wcField;
    var maxWc;

    if ($(this)[0] === $('#post_title')[0]) {
      $wcField = $('#wordCountTitle');
      maxWc = 7;
    } else {
      $wcField = $('#wordCountBody');
      maxWc = 150;
    }

    $wcField.html(wc);
    $wcField.toggleClass('over-limit', wc > maxWc);
});