How to get assigned-id of a dynamically generated element in jQuery?

Question

I have dynamically generated div from the below code in partial view.

$('#album').click(function (e) {
    var l = window.location;
    var base_url = l.protocol + "//" + l.host;
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: base_url + '/CreateAlbum/DisplayAlbum',
        success: function (data) {
            $.each(data, function (index, el) {
                console.log(el);

                for (i = 0; i < el.length; i++) {
                    div = $('<div class="albumclass" />');
                    **img = $('<img  src="/Content/images/fold.jpg" width=150 height=150 assigned-id ='+el[i]["ID"]+'/>').prependTo(div);**

                    lbl = $('<label/>').text(el[i]["title"]).appendTo(div);

                    div.appendTo('.album_inner');

                }

            });
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Error");
        }
    });


});

I need to catch the value of 'assigned-id' of current double clicked image in jquery.I tried the below code but result 'undefined'

 $('.album').on('dblclick', '.albumclass img', function (e) {         

        $("#albumId").val($(this).data('assigned-id'));

    });

Anybody please help

score 0 · Accepted Answer · edited May 23 '17 at 12:22

assigned-id is attribute and not property of element. You need to use .attr('assigned-id'):

 $('.album_inner').on('dblclick', '.albumclass img', function (e) {         
    $("#albumId").val($(this).attr('assigned-id'));
 });

Note: you should use .data-* attributes(added in HTML5) for adding custom attributes as adding your own attributes can break elements validation and make html invalid (see https://stackoverflow.com/a/1735239/1719752).

<div class="albumclass">
 <img src="/Content/images/fold.jpg" width="150" height="150" data-assigned-id="9/">
 <label>15Sep2015</label>
</div>

and then use .data() to get set value associated with it:

 $('.album_inner').on('dblclick', '.albumclass img', function (e) {         
    $("#albumId").val($(this).data('assigned-id'));
 });

@Neethu: can you share the fiddle with relevant html and js code?? — Milind Anantwar, Sep 16 '15 at 12:36

score 0 · Answer 2 · answered Sep 16 '15 at 11:41

I would recommend you to use data-* prefixed custom attribute

<div class="albumclass">
    <img src="/Content/images/fold.jpg" width="150" height="150" data-assigned-id="9/">
    <label>15Sep2015</label>
</div>

Then you can use data() to fetch it.

 $('.album').on('dblclick', '.albumclass img', function (e) {         
    $("#albumId").val($(this).data('assigned-id'));

    //As per current implementation use
    //$("#albumId").val($(this).attr('assigned-id'));
 });

How to get assigned-id of a dynamically generated element in jQuery?

2 Answers2