时间戳

首页 > 解决方案 > 无法在 ajax 响应中获取数据 ID 以解析为模态

javascript - 无法在 ajax 响应中获取数据 ID 以解析为模态

问题描述

当我data-id从 ajax 响应获取 href 时遇到问题，总是响应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

标签： javascriptjqueryajax

解决方案

委托您的点击事件

$('#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>

推荐阅读