jQuery sizzle error / disabling rails turbolinks on specific links? (jsFiddle included)

Question

Setting data-no-turbolink="true" in my a tag has absolutely no effect.

My HTML template looks essentially like this:

<fieldset id="1">
<h3>ONE</h3>
<a data-no-turbolink="true" href="#2" class="btn btn-xs btn-default" >Next</a>
</fieldset>

<fieldset id="2">
<h3>TWO</h3>
<a data-no-turbolink="true" href="#1" class="btn btn-xs btn-default" >Back</a><br>
<a data-no-turbolink="true" href="#3" class="btn btn-xs btn-default" >Next</a>
</fieldset>

<fieldset  id="3">
<h3>THREE</h3>
<a data-no-turbolink="true" href="#2" class="btn btn-xs btn-default" >Back</a><br>
<a data-no-turbolink="true" href="#4" class="btn btn-xs btn-default" >Next</a>
</fieldset>

<fieldset  id="4">
<h3>FOUR</h3>
<a data-no-turbolink="true" href="#3" class="btn btn-xs btn-default" >Back</a>
</fieldset>

Simple JS:

  $(function() {
    $('fieldset').first().show();

    function change_fieldset(show_set) {
      $('fieldset').hide();
      $(show_set).show();
    }

    $('fieldset').on('click', 'a', function() {
      var show_set = $(this).attr('href');
      change_fieldset(show_set);
    });
  });

TurboLinks is breaking the code. I see this in console:

XHR finished loading: GET "http://localhost:3000/people/1015/edit". turbolinks.js?body=1:87

And sometimes this happens:

Uncaught Error: Syntax error, unrecognized expression: http://localhost:3000/people/1015/edit#about-me-continued jquery.js?body=1:1472

Sizzle.error = function( msg ) {
    throw new Error( "Syntax error, unrecognized expression: " + msg );
};

Here is a fiddle: (which works perfectly) http://jsfiddle.net/S8JkE/

Does anyone know why these random errors are happening? How to correct this? Thanks!

Answer 1

Somehow the value of show_set was randomly becoming the entire URL string which would cause the Sizzle.error I corrected the problem by changing fieldset's to data-selectors and verifying the value of show_set before calling show() on it.

Working code:

  $(function() {
    $('fieldset').first().show();

    function change_fieldset(show_set) {
      $('fieldset').hide();
      $("[data-link="+show_set.replace(/.*#/,'')+"]").show();
    }

    $('fieldset').on('click', 'a', function() {
      var show_set = $(this).attr('href');
      change_fieldset(show_set);
    });
  });