jQuery not changing the image source attribute on dynamically created image

Question

I am dynamically creating elements on click on my page:

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

I call this script with the click:

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

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

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

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

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

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

    console.log(images);
}

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

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

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

    function preload() {
      console.log('entered');
        for (i = 0; i < 2; i++) {
            if (nextImage < 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 > (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 < 0) {
            imagesIndex = 0;
        }

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

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

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.

Could help you if you could provide a working Fiddle. most of your code is dynamically generated based on a JSON data. Providing that would help you as well. — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Oct 25, 2016 at 12:56
@NikhilNanjappa The best is to make a stack snippet, and not a jsfiddle. A stack snippet will work as long as stackoverflow works. And you can do it really easily from the question. — Ismael Miguel
– Ismael Miguel, Commented Oct 25, 2016 at 13:17
@IsmaelMiguel - I don't care where as long as we can debug & help its fine. I am sure the OP understood. — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Oct 25, 2016 at 13:21
dont change the $("#image") directly i think write $(document).find("#image") is better — Araz Shamsaddinlouy
– Araz Shamsaddinlouy, Commented Oct 25, 2016 at 13:26

Soliyappan · Accepted Answer · 2016-10-25 13:23:30Z

1

It seems that there is a minor bug in the $(document).ready(function(){ }); .

The code has 2 click events for same button #forward. Probably one should be assigned to #back button.

answered Oct 25, 2016 at 13:23

Soliyappan

6666 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ludwig Over a year ago

Of course, something stupid like this took me so much time, thank you for noticing this!

Collectives™ on Stack Overflow

jQuery not changing the image source attribute on dynamically created image

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related