title: jQuery - change events on click, then revert to original events on second click?
body: <p>HI al</p>
  
  <p>I'm trying to allow a kind of 'toggle' state on a bunch of image elements, whereby they have <br/></p>
  
  <ul>
  <li>
  a rollover, </li>
  <li>an onclick image change and </li>
  <li>List item
  an ID change when clicked.</li>
  </ul>
  
  <p>That much I can do, but I can't get them to revert when they are clicked a second time (i.e. returning to the original image, with the rollover re-instated and the original ID restored).</p>
  
  <p>Here's my code:</p>
  
  <pre><code>$("#Table1 img").each(function () { // loops round every image in Table1
      $(this).hover(function () {   // sets hover rules
          this.src = "images/mine.gif"
      },function () {  // mine.gif for mouseover, available.gif for mouseout
          this.src = "images/available.gif"
      });
      $(this).click(function () { // sets click rules
          this.src = "images/mine.gif"; // mine.gif for onclick
          this.id = "x" + this.id; // adds an 'x' to the ID of clicked images
          $(this).unbind("mouseover mouseout"); // removes mouseover and mouseout events to keep visual selection
          $(this).click(function () {
              this.src = "images/available.gif";
              this.id = this.id.substr(2, this.id.length);
          });
      });
  });
  </code></pre>
  
  <p>I tried embedding a <code>$(this).hover()</code> function in the second <code>$(this).click()</code>, but that didn't work.</p>
  
  <p>The above code works entirely, but I just can't get the original rollovers to be reinstated.</p>
  
  <p>Any help would be much appreciated. I realise there are more elegant ways of doing what I've already done in jQuery (delegates and such like) but since I'm learning I'd like to do it the simple and obvious way first.</p>
  
  <p>:)</p>