将 html 附加到引导模式不起作用

Question

我正在尝试使用 data- 属性将 php foreach 循环中的图像加载到引导模式中，但目标 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 参数。其次，要绑定的事件的名称应该是shown.bs.modal。 Bootstrap website 上的文档说：

show.bs.modal 该事件在调用 show 实例方法时立即触发。如果是由单击引起的，则单击的元素可用作事件的 relatedTarget 属性。

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

Answer 2

变量imgURL 是单击处理程序的本地变量，因此无法在shown 处理程序中访问它。在这两个函数的共享范围内声明变量以使其工作

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


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