Turbolink干扰JavaScript

Question

I know this is a beat down topic but I tried following the docs and other similar SO posts on this.

My issue is the JS won't work unless the page is reloaded.

I have the following JS:

$(function() {
  $('a.form-show').click(function(event){
    event.preventDefault();
    $(this).parent().next('div.form-hide').toggle();
  });
});

This toggles a link to appear and hide an element in a form.

This works only on page reload and not even every time...

I tried updating it to (as per SO posts and turbolinks docs):

$(document).on('turbolinks:load', function()){
  $('a.form-show').click(function(event){
    event.preventDefault();
    $(this).parent().next('div.form-hide').toggle();
  });
});

When i use this code, and click the button to toggle, it does nothing but reload the page. (at least it runs in the CMD as a reload but nothing on the front end really happens.

And I get this error:

SyntaxError: missing { before function body

I'm no good as JS so this attempt could be completely wrong and I am sure it may be.

Any ideas on how to make this work?

Answer 1

function()){ - change to function(){ and error

SyntaxError: missing { before function body

disappear