javascript - 将 html append 到 Bootstrap 模式不起作用

Question

我正在尝试使用 data- 属性从 php foreach 循环将图像加载到 Bootstrap 模式中，但目标 div 中没有显示任何内容 - 这是我的代码:

<script>

$(document).ready(function(){

  $( ".subscribe" ).on( "click", function() {
  var imgURL = $( this ).attr( "data-img-url" );
  console.log(imgURL);
});


$( "#subscribeModal" ).on('shown', function(){
  $('#sub_img').append('<img src="'+imgURL+'" />');
 });
});

</script>

Answer 1

您有 2 个问题。首先是别处提到的 imgURL 参数。其次，要绑定(bind)的事件的名称应该是 shown.bs.modal。 Bootstrap website 上的文档说:

show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

$( "#subscribeModal" ).on('shown.bs.modal', function(){
  $('#sub_img').append('<img src="'+imgURL+'" />');
 });
});