title: Bootstrap 3 Modal box - Uncaught Error: Syntax error, unrecognized expression:
body: <p>This Bootstrap 3 modal box code works file on <a href="http://codepen.io/jitendravyas/pen/zLKAs" rel="nofollow">codePen</a> but giving error inside my rails app.</p>
  
  <p>This error shows in console when I click on thumbnail. When the code is integrated inside my app. But on codepen example it works fine.</p>
  
  <p>my browser is the latest version of Google chrome on Windows.</p>
  
  <p><strong>Error</strong></p>
  
  <pre><code>Uncaught Error: Syntax error, unrecognized expression: 
       &lt;figure class="thumbnail"&gt;
        &lt;img src="http://lorempixel.com/600/450/"&gt;
        &lt;figcaption class="truncate caption"&gt; blah blah blah blah blah blah &lt;/figcaption&gt;
      &lt;/figure&gt;
  </code></pre>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>$(".thumbnail").click(function(){
      $('.modal-body').empty();
      var title = $(this).parent('a').attr("title");
      $('.modal-title').html(title);
      $($(this).parents('div').html()).appendTo('.modal-body');
      $("#myModal").modal({show:true});
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row borrowers-thumbnails"&gt;
    &lt;div class="col-xs-6 col-sm-3 col-md-3"&gt;
      &lt;figure class='thumbnail'&gt;
        &lt;img src="http://lorempixel.com/600/450/"&gt;
        &lt;figcaption class="truncate caption"&gt; blah blah blah blah blah blah &lt;/figcaption&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="myModal" class="modal fade campaign-borrowers" tabindex="-1" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>