-1

So I'm trying to get the ID of the photo that a button is attached to (underneath) but am having some trouble.

I'm dynamically inserting using JavaScript innerHTML and it all works fine: Here's my code for creating the images as well as buttons and descriptions etc.

for (var i = 0; i < photos.length; i++) {

        htmlStr += '<div class="images"> <figure> <a href="' + photos[i].largeURL +
            '" data-lightbox="watches" data-title=' + photos[i].description + '><img src=' + photos[i].thumbnail + ' ' +
            'alt=”Photo” width=150 height=150></a><figcaption>' + photos[i].description
            + "<br> total likes " + photos[i].likes + "<div id='btnDelete'><input type='button' onclick ='unlikePhoto(photos.id)'value='Like' id='btnDeleteID'></div>" + ' </figcaption></figure></div>'
        //console.log(htmlStr);


    }

The HTML:

<div class="imagesArea" id="imageArea">
<div class="images">

</div>
    <div class="images">

    </div>

What I'm having trouble figuring out is for each image dynamically inserted, how can I make the button press grab the id that is defined when creating the image dynamically? or even description etc.\

edit: Image: enter image description here

16
  • 2
    You picture doesn't really help, what DOM does that code produce? Commented Oct 12, 2014 at 12:31
  • 1
    is your button also created dynamically?
    – Meer
    Commented Oct 12, 2014 at 12:32
  • 1
    You are not giving an id to the image in your loop :) Commented Oct 12, 2014 at 12:43
  • 1
    you can use $('#myDynButton_1').on('click',function(){$(this).parents('div').child('img').attr('id')};
    – Meer
    Commented Oct 12, 2014 at 12:45
  • 1
    @Meer Where are you seeing an ID for the image :D Commented Oct 12, 2014 at 12:47

2 Answers 2

1

Change you loop to something like this where you assign an ID to each image

for (var i = 0; i < photos.length; i++) {

    htmlStr += '<div class="images"> <figure> <a href="' + photos[i].largeURL +
        '" data-lightbox="watches" data-title=' + photos[i].description + '><img src=' + photos[i].thumbnail + ' ' +
        'alt=”Photo” id=' + photos[i].id + ' width=150 height=150></a><figcaption>' + photos[i].description + "<br> total likes " + photos[i].likes + "<div class='btnDelete'><input type='button' value='Like' class='btnDeleteID'></div>" + ' </figcaption></figure></div>';
    //console.log(htmlStr);


}

Remove onclick (it is bad practise to use it) and make it like this

$(document).on('click', '.btnDeleteID', function() {    
    var photoID = $(this).closest(".images").find("img").attr("id");
    unlikePhoto(photoID);
});
0
1

If you modify your HTMLString by setting the value as the id or a data- attribute of the image and pass the reference to clicked button using this as follows:

htmlStr += "<div class='images'>"
          + "<figure>"
            + "<a href='" + photos[i].largeURL +"' data-lightbox='watches' data-title='"+ photos[i].description + "'>"
              +"<img id='"+photos[i].id+"' src='" + photos[i].thumbnail + "' alt='Photo' width=150 height=150>"
            +"</a>"
            +"<figcaption>"+ photos[i].description + "<br> total likes " + photos[i].likes
              + "<div class='btnDelete'><input type='button' onclick ='unlikePhoto(this)' value='Like' class='btnDeleteID'></div>"
            +"</figcaption>"
         +"</figure>"
       +"</div>"

You can then use jquery to access the corresponding images id like:

function unlikePhoto(elm){
 var photoId  = $(elm).closest(".images").find("img").attr("id");
};

Side note: Having multiple elements with same id is invalid so change it to class name

1
  • He doesn't have an ID attached to the image :) Commented Oct 12, 2014 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.