title: Getting jquery one() to work with repeated classes
body: <p>Here is our HTML:</p>
  
  <pre><code>&lt;div class="selecter-options"&gt;
      &lt;span class="selecter-item" data-value="8"&gt;ABC&lt;/span&gt;
      &lt;span class="selecter-item" data-value="11"&gt;DEF&lt;/span&gt;
      &lt;span class="selecter-item selected" data-value="12"&gt;GHI&lt;/span&gt;
      &lt;span class="selecter-item" data-value="7"&gt;JKL&lt;/span&gt;
      &lt;span class="selecter-item selected" data-value="19"&gt;MNO&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here our jQuery:</p>
  
  <pre><code>$('.selecter-item').one('click touch',
      function(){
      $('.selected').removeClass('selected');
  })
  </code></pre>
  
  <p>We are using jQuery to remove all '.selected' classes from our html when any '.selecter-item' is clicked. The jQuery should only fire the first time ANY '.selecter-item' element has been clicked.</p>
  
  <p>How do we get jQuery to removeClass('selected') only once IRRESPECTIVE of which .selector-item is clicked on? </p>
  
  <p>Thanks in advance for any help!</p>