如何在jQuery中获取动态生成元素的assign-id？

Question

我已经在部分视图中从下面的代码动态生成了div。

$('#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"); 
     } 
    }); 


}); 

我需要捕捉的jquery.I目前双次点击图像的“分配ID”值尝试下面的代码，但导致“未定义”

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

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

    }); 

有人请帮助

Answer 1

assigned-id是属性而不是元素的属性。您需要使用.attr('assigned-id')：

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

注意：你应该使用.data- *添加自定义属性（在HTML5中添加）属性为增加自己的属性可以打破元素的验证，使HTML无效（见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> 

，然后用.data()得到与之相关的设定值：

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

Answer 2

我会建议你使用data-*前缀自定义属性

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

然后你可以用data()获取它。

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

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