title: how to rebind event after unbinding it on click
body: <p>I searched the internet for a lightbox that allows me to zoom the image at the same time.
  now i only found a solution for paying a lot of money. so i decided to take two plugins and use them together. so far i went into some problems....</p>
  
  <p>after a couple hours i decided to build my own lightbox and use the zoom plugin. 
  so far im good with it. it opens, zoom works. if i click and hold i can change zoom ratio... if i leave image and come back (mouseover/mouseout) it closes the zoom (what is actually ok) but when im over it again, it won't start zoom again.
  i know its because i unbind the click but i have to do it. else it won't work on other images. and i don't know where to rebind it and how ether :)</p>
  
  <p>So the main question is: <strong>can someone explain me how to unbind and bind correct to solve my problem?</strong></p>
  
  <p><em>(if i can do something better in my question, please comment, ill update my post than)</em></p>
  
  <p>So i have following code</p>
  
  <p>Here is a <strong><a href="http://jsfiddle.net/uRfyG/3/" rel="nofollow">FIDDLE</a></strong> so you can see it</p>
  
  <hr>
  
  <p><strong>EDIT</strong>: I edited my Fiddle because i added a function to tjpzoom.js </p>
  
  <pre><code>function TJPunbind()
  {
      console.log(obj);
  }
  </code></pre>
  
  <p><em>the strange thing about it is... i usually wanted to check if object still exist out of the normal call of tjpzoom but when i call console.log on the obj (containing the zoomfile data) the zoom function works fine, almost like i wanted it to work. but there is no output on console.log(obj)</em></p>
  
  <hr>
  
  <p><strong>My jQuery</strong></p>
  
  <pre><code>/** Lightbox inkl. Zoomer **/
  var overlay = "&lt;div class='lbOverlay'&gt;&lt;/div&gt;";
  var container = "&lt;div class='lbContainer'&gt;&lt;img src='' border='0' /&gt;&lt;/div&gt;";
  var blindimg = "&lt;img id='blindimg' src='' style='display:none;' /&gt;";
  $('body').append(overlay, container);
  
  
  $('.imgContainer img').each(function () {
  
  
      $(this).on('click', function () {
          var width = 0;
          var height = 0;
          var faktor = 0;
          var max = 600;
          $('body').append(blindimg);
  
          var imagename = $(this).attr('src');
          /** Show Overlay **/
          $('.lbOverlay').fadeToggle(function () {
  
  
  
              /** Add IMG to Blindimg **/
              $('#blindimg').attr('src', imagename).load(function () {
  
                  /** Get IMG Sizes **/
                  width = $(this).width();
                  height = $(this).height();
  
                  /** Check if img size is bigger than max allowed **/
                  if (width &gt; max || height &gt; max) {
                      if (width &gt; height) faktor = width / max;
                      else faktor = height / max;
  
                      /** set new size **/
                      width = width / faktor;
                      height = height / faktor;
                  }
  
  
                  /** set up scale for image container **/
                  var margin = '-' + height / 2 + 'px 0 0 -' + width / 2 + 'px';
                  $('.lbContainer').css({
                      'width': width,
                          'height': height,
                          'margin': margin
                  });
  
                  /** set showen image **/
                  $('.lbContainer img').attr('src', imagename).css({
                      'width': width,
                          'height': height
                  });
                  //console.log(width + 'x' + height);
  
              });
  
              /*
              function showZoom(element,item,image){
                  $(element).click(function(){
                      TJPzoom(item,image);
                  });
              }
              */
  
              function mouseIn() {
                  $('img', this).css('cursor', 'all-scroll');
              }
  
              function mouseOut() {
                  console.log('do some else');
  
              }
  
              /** Show Container **/
              $('.lbContainer').fadeToggle().click(function () {
                  TJPzoom($('img', this)[0], imagename);
                  /** unbind click so zoomer won't be fired more than once **/
                  $('.lbContainer').unbind('click');
              }).hover(mouseIn, mouseOut);
  
  
  
          }).click(function () {
              /** close lightbox **/
              $('.lbContainer').fadeToggle(); // fadeout Container
              $(this).fadeToggle(); // fadeout Overlay
              $(this).unbind();
              $('#blindimg').remove(); //remove blingimg (will be rebind on next click)
          });
  
      });
  });
  </code></pre>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;div class='imgContainer'&gt;
          &lt;img src="http://miriadna.com/desctopwalls/images/max/Landscape-with-calm-river.jpg" alt="" width="" height="" border="0" /&gt;
      &lt;/div&gt;
      &lt;div class='imgContainer'&gt;
          &lt;img src="http://www.hdwallpaperstop.com/wp-content/uploads/2013/10/Mountain-Landscape-Desktop-Wallpaper.jpg" alt="" width="" height="" border="0" /&gt;
      &lt;/div&gt;
      &lt;div class='imgContainer'&gt;
          &lt;img src="http://www.hdwallpaperstop.com/wp-content/uploads/2013/05/Beautiful-Landscape-Pictures-of-nature.jpg" alt="" width="" height="" border="0" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>.imgContainer {
      float: left;
      margin-right: 10px;
  }
  .imgContainer img {
      max-width: 150px;
  }
  .lbOverlay {
      width: 100%;
      height: 100%;
      background: black;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.7;
      display: none;
      z-index: 1000;
  }
  .lbContainer {
      left: 50%;
      top: 50%;
      background: white;
      position: absolute;
      display: block;
      padding: 5px;
      display: none;
      z-index: 1001;
      -webkit-border-radius: 10px 10px 10px 10px;
      border-radius: 10px 10px 10px 10px;
      -webkit-box-shadow: 3px 4px 12px 3px #333;
      box-shadow: 3px 4px 12px 3px #333;
  }
  .lbContainer img {
      -webkit-border-radius: 5px 5px 5px 5px;
      border-radius: 5px 5px 5px 5px;
  }
  </code></pre>