не может получить data-id в ответе ajax для синтаксического анализа модального

Question

У меня проблема, когда я получаю data-id в href от ответа ajax, ответ всегда undefined.

$("#loader_ekpresi").show();
  $.ajax({
    url:"<?php echo site_url() ?>Home/get_ekspresi",
    type:'GET',
    dataType: 'json',
    data: {page:page}
  }).done(function(response){
      $.each(response, function( key, value) {
        $('#gallery_show_ekpresi').append('<div class="item-box-gallery-4">'+
            '<input type="hidden" id="url_ig" value="'+value.attachment_link+'embed/captioned">'+
            '<a href="#" id="get_url" data-id="'+value.attachment_link+'embed/captioned" data-toggle="modal" data-target="#popup_gallery_modal">'+
            '<img src="'+value.attachment_link+'media/?size=l">'+
            '</a>'+
        '</div>');
      });
});


$('#get_url').click(function() {
  var gallery_modal = $(this).attr('data-id'); 
    alert(gallery_modal);
});

всегда есть undefined

Answer 1

Делегируйте ваше событие клика

$('#gallery_show_ekpresi').on('click','#get_url',function() {
    var gallery_modal = $(this).attr('data-id'); 
        alert(gallery_modal);
});

демо:

var response = [{
  attachment_link: '1'

}, {
  attachment_link: '2'

}]
$.each(response, function(key, value) {

  $('#gallery_show_ekpresi').append('<div class="item-box-gallery-4">' +
    '<input type="hidden" id="url_ig" value="' + value.attachment_link + 'embed/captioned">' +
    '<a href="#" id="get_url" data-id="' + value.attachment_link + 'embed/captioned" data-toggle="modal" data-target="#popup_gallery_modal">' +
    '<img src="' + value.attachment_link + 'media/?size=l">' +
    '</a>' +
    '</div>');
});
$('#gallery_show_ekpresi').on('click', '#get_url', function() {
  var gallery_modal = $(this).attr('data-id');
  alert(gallery_modal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="gallery_show_ekpresi"></div>

Answer 2

Используйте классы вместо идентификатора, вы добавляете в цикле.

$("#loader_ekpresi").show();
            $.ajax({
                url:"<?php echo site_url() ?>Home/get_ekspresi",
                type:'GET',
                dataType: 'json',
                data: {page:page}
            }).done(function(response){

                $.each(response, function( key, value) {

                    $('#gallery_show_ekpresi').append($('<div class="item-box-gallery-4">'+
                        '<input type="hidden" class="url_ig" value="'+value.attachment_link+'embed/captioned">'+
                        '<a href="#" class="get_url" data-id="'+value.attachment_link+'embed/captioned" data-toggle="modal" data-target="#popup_gallery_modal">'+
                        '<img src="'+value.attachment_link+'media/?size=l">'+
                        '</a>'+
                    '</div>'));
                });
});


$('.get_url').click(function() {
    var gallery_modal = $(this).attr('data-id'); 
        alert(gallery_modal);
});

Answer 3

Вы можете получить напрямую

$(this).data('id'); 

https://api.jquery.com/data/