jQuery not changing the image source attribute on dynamically created image
<p>I am dynamically creating elements on click on my page:</p>

<pre><code>                &lt;img
                  src="/imagecache/large/{{ $issue-&gt;first()-&gt;image  }}"
                  onclick="magazineDetail(
                    '{{ $issue-&gt;first()-&gt;magazine-&gt;id }}',
                    '{{ $issue-&gt;first()-&gt;magazine-&gt;name }}',
                    '{{ $issue-&gt;first()-&gt;magazine-&gt;summary ?: '' }}',
                    '{{ $issue-&gt;first()-&gt;magazine-&gt;image ?: '' }}',
                    '{{ $issue-&gt;first()-&gt;image  }}'
                    )"
                  &gt;
</code></pre>

<p>I call this script with the click:</p>

<pre><code>function magazineDetail(id, name, summary, issueImage, magazineImage){
    images = [];
    nextImage = 0;
    loadedImages = [];

    $('#magazine-detail')[0].innerHTML = '&lt;section id="magazine-detail" class="magazine-detail"&gt;&lt;div class="large-6 medium-6 small-12 columns"&gt;&lt;div class="magazine-hero"&gt;&lt;img id="image" src="/imagecache/cover/' + magazineImage + '" alt="' + name + '" /&gt;&lt;div class="magazine-preview-nav"&gt;&lt;div class="right-arrow" id="forward"&gt;&lt;img src="/img/right-arrow-black.svg" /&gt;&lt;p&gt;Neste utgivelse&lt;/p&gt;&lt;/div&gt;&lt;div class="left-arrow" id="back"&gt;&lt;img src="/img/left-arrow-black.svg" /&gt;&lt;p&gt;Forrige utgivelse&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="large-6 medium-6 small-12 columns"&gt;&lt;div class="row"&gt;&lt;div class="small-6 columns magazine-title"&gt;&lt;h1 id="name"&gt;&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;p id="summary"&gt;&lt;/p&gt;&lt;img id="issueImage" src="" alt="" /&gt;&lt;p&gt;&lt;/p&gt;&lt;button class="button primary expand"&gt;Kjøp abonnement - 1 måned gratis&lt;/button&gt;&lt;button class="button secondary expand"&gt;Bla igjennom arkivet&lt;/button&gt;&lt;/div&gt;&lt;/section&gt;';

    $('#image').attr({"src" : '/imagecache/cover/' + magazineImage, "alt" : name});
    $('#name').text(name);
    $('#summary').text(summary);

    if (issueImage != '') {
      $('#issueImage').html('&lt;img src="/imagecache/medium/"' + issueImage + ' alt="' + name + '"&gt;');
    }

    $('html, body').animate({
        scrollTop: $("#magazine-detail").offset().top + 1500
    }, 1700);

    $.getJSON("issue/images",
        { id: id },
        function(result){
          if (result.length &lt; 2){
              $('.magazine-preview-nav').hide();
          } else {
              $('.magazine-preview-nav').show();
          }
          $.each(result, function(i, value){
              images.push(value);
          });
          function imagePreload() {
              preload();
          };
    });

    console.log(images);
}
</code></pre>

<p>There I have <code>&lt;div class="magazine-hero"&gt;&lt;img id="image" src="/imagecache/cover/' + magazineImage + '" alt="' + name + '" /&gt;</code> that I am creating in <code>$('#magazine-detail')[0].innerHTML</code>.</p>

<p>Then I have a function that should change the src of that element with the <code>id="image"</code>  that is being created on click. 
This is the script that takes care of that:</p>

<pre><code>$(document).ready(function () {
    imagesIndex = 0;
    nextImage = 0;
    loadedImages = new Array();

    function preload() {
      console.log('entered');
        for (i = 0; i &lt; 2; i++) {
            if (nextImage &lt; images.length) {
                var img = new Image();
                img.src = '/imagecache/cover/' + images[nextImage];
                loadedImages[nextImage] = img;
                ++nextImage;
            }
        }
    }

    $('#magazine-detail').on('click','#forward', function() {
      imagesIndex++;
      preload();

      if (imagesIndex &gt; (loadedImages.length - 1)) {
          imagesIndex = loadedImages.length - 1;
      }
console.log(loadedImages.length);
console.log(loadedImages[imagesIndex].src);
      $('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
    });

    $('#magazine-detail').on('click','#forward', function() {
        imagesIndex--;

        if (imagesIndex &lt; 0) {
            imagesIndex = 0;
        }

        $('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});
    });
});
</code></pre>

<p>On inspecting the <code>console.logs</code> I see that the new images are being created with the <code>preload function</code>, and that the correct <code>image src</code> is being passed to:
<code>$('#image').attr({"src" : loadedImages[imagesIndex].src, "alt" : name});</code></p>

<p>But the image on page is not being changed. I should also maybe mention that everything worked fine when I wasn't creating those elements after the page has loaded but had them hiddden.</p>