title: Twitter Bootstrap carousel: event scope?
body: <p>I have a Twitter bootstrap carousel .on(slid) event that is fired after clicking a element that targets a particular slide, and an .on(slid) event that is fired after clicking a different element (close button). However once the second event occurs, it continues to fire even with the first on(slid) event. I thought preventDefault() would fix this but it doesn't. I even tried a more complete function (shown below, from <a href="https://stackoverflow.com/users/239663/herb-caudill">Herb Caudill</a>) to do this, but no go. </p>
  
  <p>Using (this) to tie the scope of the event to the function didn't work. I am fairly new at this, so I am thinking there may be a fundamental concept here that I'm not grasping. </p>
  
  <p>Here's a simplified version of my code:</p>
  
  <pre><code>// Intended to prevent event bubble up or any usage after this is called.
  eventCancel = function (e)
  {
     if (!e)
       if (window.event) e = window.event;
       else return;
     if (e.cancelBubble != null) e.cancelBubble = true;
     if (e.stopPropagation) e.stopPropagation();
     if (e.preventDefault) e.preventDefault();
     if (window.event) e.returnValue = false;
     if (e.cancel != null) e.cancel = true;
  }    
  
  $('.recentContent').click(function(){
  var $lastIndex = $('#splashCarousel .carousel-inner').children().last().getIndex();
  $('#splashCarousel').carousel($lastIndex); //slide to specific index
  $('#splashCarousel').carousel('pause');
  
  $('#splashCarousel').on('slid', function (e) {
              alert("open");
      //do stuff
      return eventCancel(e);
  })
  });
  
  $('.closeX').click(function(){
  
  var $lastItem = $('#splashCarousel .carousel-inner').children().last();
  
  $('#splashCarousel').carousel(0); 
  
  $('#splashCarousel').on('slid', function (e) {
          alert("close");
      //do other stuff
          return eventCancel(e);
  })
  });
  </code></pre>
  
  <p>and here's an even simpler fiddle trying preventDefault: <a href="http://jsfiddle.net/chardwick/a5Dpe/" rel="nofollow noreferrer">http://jsfiddle.net/chardwick/a5Dpe/</a></p>
  
  <p>What might I being doing wrong? </p>
  
  <p>Thanks!</p>
  
  <p><strong>Edit:</strong> I see some discussion elsewhere on SO about nesting events, both that they shouldn't be done, and that sometimes they have to. Either way I still seem to get multiple event firings. Using live() for event delegation looks promising. Still could use some feedback though, as it's all starting to muddle for me.</p>