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

Question

I'm trying to load an image from a php foreach loop into a bootstrap modal using data- attribute but nothing showing in target div - here's my code:

<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

You have 2 issues. First is the imgURL parameter mentioned elsewhere. Second, the name of the event to bind to should be shown.bs.modal . The documentation on the Bootstrap website says:

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+'" />');
 });
});

Answer 2

The variable imgURL is local to the click handler, so it won't be accessible inside the shown handler. Declare the variable in a shared scope of both those functions to make it work

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