title: Bind function only to clicked link without using an id
body: <p>I'm using data attributes on my anchor tags but when the following event is fired it changes all links with that attribute, <em>obviously</em> I guess. I don't want to use ids I just want to bind the event only to the clicked link...should be super easy but I can't solve this. <strong>This is being used in conjunction with Twitter Bootstrap collapse</strong> for a read more / read less excerpt function.</p>
  
  <pre><code>//Excerpt functions
  $('.collapse').on('shown', function () {
    $('[data-target]').click(function() {
      $(this).html('&amp;raquo More');
    });
  });
  $('.collapse').on('hidden', function () {
    $('[data-target]').click(function() {
      $(this).html('&amp;laquo Less');
    });
  });
  </code></pre>
  
  <p>my html looks like this</p>
  
  <pre><code>&lt;a href="#" data-toggle="collapse" data-target="#more1"&gt;&amp;raquo; More&lt;/a&gt;
  &lt;div id="more1" class="collapse"&gt;&lt;/div&gt;
  </code></pre>