Why Would This JS Fire On A Form Partial Rendered On 1 Page But Not Another?

I have a posts.js file that looks like this: var ready; ready = function() { var toggleSidebar = $('.togglesidebar'); var primary = $('#primary'); var secondary = $('#

Solution 1:

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(){

to the delegated event

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

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.

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

Solution 2:

I am using something like this on one of my projects, had the same problem hope it helps:

window.onLoad = function(callback) {
  $(document).ready(callback);
  $(document).on('page:load', callback);
};

and then wrap up my functions with onLoad, something like

onLoad(function() {
  counter()
});

The onLoad function binds the ready event and the turbolink page:load event

Solution 3:

when you do

$("selector").on("click", function(){});

you actually bind the selector to the click event.

White if you use

$(document).on("click", "selector", function(){});

You bind the click event to the document, which after the click checks if the clicked element was the selector you used. if yes, it executes the function. So you should use the second approach whenever binding events on dynamic elements.

I hope that answers the question of "why"

Solution 4:

Long time I don't work with jQuery, but since I got here: If you have more than one element with the selector ".sidebar", I believe you'll need to use ".each" to bind the function to all elements that match that selector on the dom.

For the reference go here http://api.jquery.com/each/

Hope this helps, good luck.

Solution 5:

I took a look on Turbolinks, and it does what I thought it did: It loads the HTML content of a link inside a container on the main page. Problem is, anything it loads is agnostic of whatever events and functions you have declared when the main page loaded, so indeed, after the first click, the selector on the HTML it has just loaded won't have the click event attributed to it (it was not on the DOM when you did the binding).

Possible solution: I did a little research on the .live() method, but is has been deprecated, so I recommend doing something like this:

$('body').on('click','a.saveButton', saveHandler)

Binding closer to the element you need will, it seems, will assure that whatever Turbolinks loads inside the body will get the bindings you have declared.

There is a more detailed answer here: Javascript event binding persistence

The documentation for the .live hook is here: http://api.jquery.com/live/#typefn

I used to have the same architecture on my web pages back in the day, and I did run on a problem similar to yours.

Hope it helps.