title: Selecting the next element with a given class from an element specified in code with jQuery
body: <p>I've tried loads of options now!</p>
  
  <p>I have a set of elements which contain thumbnails, created by an ASP Repeated and dynamically rendered to a page by an AJAX load, within them are some icons which when clicked enlarge an image.</p>
  
  <p>The repeated HTML looks like this:</p>
  
  <pre><code>    &lt;div class="prodImgContainer"&gt;
          &lt;img src="*url*" id="*id*" class="itemImages" /&gt;
          &lt;div class="imgControl"&gt;
              &lt;span class="tinyIcons tinyDelete imgDelete" id="delete*id*"&gt;&lt;/span&gt;
              &lt;br /&gt;
              &lt;span class="tinyIcons tinyZoom imgZoom" id="zoom*id*"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>So, when you anything with the class <code>imgZoom</code> it fires the enlargement. This is done by a standard function which I have in place for loading modal windows.</p>
  
  <pre><code>    $('.imgZoom').live('click', function () {
          var prodId = $('#productId').val();
          var thisImage = ($(this).attr('id').replace('zoom', '')).replace('-tb', '');
          var img = $("&lt;img /&gt;").addClass('nextImg').attr('id', 'thisImg' + thisImage).attr('src', '*BASE URL *' + prodId + '/' + thisImage + '.jpg').load(function () {
              if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                  alert('broken image!');
              } else {
                  $("#largeImgContainer").empty();
                  $('#showImg').click();
                  $("#largeImgContainer").css('display', 'none').append(img).delay('1000').fadeIn('slow');
              };
          });
      });
  </code></pre>
  
  <p>The above code loads the enlarged image into an existing container.</p>
  
  <p>Now... I want to be able to trigger a <code>click</code> event on the next <code>imgZoom</code> element by clicking the image which is created.</p>
  
  <p>The calling element is no longer in the code though, so I am trying to do it like this:</p>
  
  <pre><code>    $('.nextImg').live('click', function () {
          var nextImage = ($(this).attr('id').replace('thisImg', '')).replace('-tb', '');
          $('#zoom' + nextImage + '-tb').next('.nextImg').click();
      });
  </code></pre>
  
  <p>Here, I am able to determine the ID of the element which was originally clicked to open up this image</p>
  
  <p>I am then expecting <code>$('#zoom' + nextImage + '-tb').next('.nextImg').click();</code> to find that element, then find the next one with the class <code>nextImg</code> and click it</p>
  
  <p>But it doesnt work... what am I missing?</p>