为什么此JS会在一页上部分呈现但不在另一页上呈现的表单上触发? [英] Why would this JS fire on a form partial rendered on 1 page but not another?

问题描述

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

I have a posts.js file that looks like this:

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页面上，我有以下内容:

In my application.html.erb page, I have this:

<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在这些字段中运行正常.

And when I toggle this div, and the _form partial is displayed, the JS works fine in those fields.

但是，如果我转到posts/new或/posts/:id/edit，则不会.

But if I go to posts/new or /posts/:id/edit, it doesn't.

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

Even though if I check the source of that page, I see the post.js included there.

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

What could be causing this?

编辑1

如果这很重要，我正在使用Turbolinks.

I am using Turbolinks, if that matters.

编辑2

根据答案"中的建议，我尝试了此操作:

I tried this, per suggestions in the Answers:

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在激活.toggleSidebar时即使在posts/index上也不能在我的/posts/new上使用

The key issue I am having a problem with is the 'counters', i.e. #wordCountTitle and #wordCountBody don't work on my /posts/new even though they work on the posts/index when .toggleSidebar is activated.

推荐答案

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

Instead of binding directly to the element's onclick which needs careful handling of Turbolinks events, you can use an event handler on the document, try changing the direct event

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

到委托事件

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

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

When you modify the DOM dynamically (as when Turbolinks replaces it) if you use a direct event then you would need to re-assign it.

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

For a detailed explanation see http://api.jquery.com/on/#direct-and-delegated-events

第一个功能的含义代表第二个功能.同样，对于委托事件，就绪"检查也变得不必要.考虑到这一点，您的代码将变为:

The same that goes for the first function stands for the second. Also, with delegated events the "ready" check becomes unnecessary. With this in mind, your code would become:

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

这篇关于为什么此JS会在一页上部分呈现但不在另一页上呈现的表单上触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！