title: Is it possible to prevent HTML5 data attribute action from triggering with jQuery?
body: <p>I'm asking this question only for <strong>learning purpose</strong> as I solved the problem even before writing this, but maybe you'll point out something useful for someone else.</p>
  
  <p>I'm using <a href="http://twitter.github.com/bootstrap/" rel="nofollow">Twitter Bootstrap</a> and its <a href="http://twitter.github.com/bootstrap/javascript.html#modals" rel="nofollow">modal lib</a> and here's what my code does. We open a modal, ask the user to input some json and then, the user press a "compute button" to compute the data and then the modal closes because of the <code>data-dismiss</code>.</p>
  
  <p>I just want to know if it's possible to prevent an action triggered by the html <code>data-dismiss</code> attribute using jQuery, javascript or something else.</p>
  
  <p>Here is the HMTL code for the modal:</p>
  
  <pre><code>&lt;div class="modal hide fade" id="source_modal"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
          &lt;h3&gt;Manually insert the data&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;textarea class="source_input"&gt;Insert your data here&lt;/textarea&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;a href="#" class="btn action_clear"&gt;Clear&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
          &lt;a class="btn btn-primary action_compute" data-dismiss="modal" href="#"&gt;&lt;i class="icon-fire"&gt;&lt;/i&gt; Compute&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note the last button (compute button) has <code>data-dismiss="modal"</code></p>
  
  <p>So basically, there's a <code>try catch</code> function attached to the <code>action_compute</code> class of the anchor.</p>
  
  <p>See this jQuery code:</p>
  
  <pre><code>// compute graph with json input
    $('.action_compute').on('click', function(event) {
      try
      {
        var json = JSON.parse($('.source_input').val());
        create_graph(json);
      }
      catch(err)
      {
        txt="There was an with your json data.\n";
        txt+="Error description: " + err.message + "\n\n";
        txt+="you can try to validate it with JSONLint. You may also leave the textarea blank for default behaviour";
        alert(txt);
      }
    });
  </code></pre>
  
  <p>Is it possible to prevent the action triggered by <code>data-dismiss</code>?</p>
  
  <p>Note:</p>
  
  <ul>
  <li>The Twitter bootstrap provide a jquery method to close the modal so I removed <code>data-dismiss</code> and I dismiss the modal using <code>$('#upload_modal').modal('hide');</code> only if I get to the end of the try so it does what I want.</li>
  <li>The jQuery <code>event.preventDefault();</code> doesn't stop the dismiss action when placed on the first line of the <code>catch(err)</code> jQuery code ;)</li>
  </ul>