title: How can I keep an event from firing multiple times?
body: <p>I have some <code>HTML</code> that is structured like this, </p>
  
  <p><code>&lt;ul&gt;
     &lt;li class="liSortable"&gt;List Item&lt;/li&gt;
     &lt;li class="liSortable"&gt;List Item&lt;/li&gt;
     &lt;li class="liSortable"&gt;List Item&lt;/li&gt;
     &lt;li class="liSortable"&gt;List Item&lt;/li&gt;
  &lt;/ul&gt;</code></p>
  
  <p>I have some javascript that looks like this, </p>
  
  <pre><code>$('.liSortable').not('.pseudo').draggable(listDragOption);
  $('.liSortable').bind(
      "collision",
      function(event, ui) {
  
      }
  )
  .on("mousedown", function(e){
      console.log("!!!");
      $(this).draggable('disable')
      app.startAccessoryMoveAction($(this), e);
  });
  </code></pre>
  
  <p>Clicking on a <code>.liSortable</code> fires 5 times I assume because there are 5 matching elements, how can I make it only fire once relative to the <code>.liSortable</code> that has been clicked?</p>