jquery - event listeners: why does only one of the scripts work?
<p>I am running rails 3.1 and have the following jquery script in a file /app/assets/javascripts/procedures.js.</p>

<pre><code>$(document).ready(function(){
  $('.unselected').click(function() {
    $(this).removeClass('unselected');
    $(this).addClass('selected');
  });

  $('.selected').click(function() {
    $(this).removeClass('selected');
    $(this).addClass('unselected');
  });
});
</code></pre>

<p>The first action works as expected (selecting), but unselecting does not work.</p>

<p>On the other hand, this script works as expected.</p>

<pre><code>$(document).ready(function(){
  $('.tile').click(function () {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      $(this).addClass('unselected');
    } else if ($(this).hasClass('unselected')) {
      $(this).removeClass('unselected');
      $(this).addClass('selected');
    }   
  }); 
});
</code></pre>

<p>Is it because event listeners are only assigned when the script is first run?</p>
