javascript – 为什么这个JS会在1页上部分呈现而不是另一页上的表单上激活？

我有一个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 partial时,JS在这些字段中工作正常.

但是如果我去帖子/ 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在my / posts / new上不起作用,即使它们在激活.toggleSidebar时处理posts / index.

解决方法:

而不是直接绑定到需要仔细处理Turbolinks事件的元素的onclick,您可以在文档上使用事件处理程序,尝试更改直接事件

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

委派活动

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

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

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

与第一个函数相同的代表第二个函数.此外,通过委派事件,“就绪”检查变得不必要.考虑到这一点,您的代码将变为：

$(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);
});

标签：jquery,javascript,ruby-on-rails,ruby-on-rails-4,asset-pipeline
来源： https://codeday.me/bug/20190716/1476521.html