Bootstrap jquery to populate modal content does not fire when delivered by ajax

问题

I have a bootstrap modal, and load content into it with ajax. The basic outline is detailed below:

Modal

<div class="modal fade" id="MusicModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Spotty McSpotface Player</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Ajax to populate Modal content and deliver content on scrolling to the bottom of the page

$(document).ready(function(){

    // JS to deliver content via 'infinite scroll'

    var fetching = false;

    function lastPostFunc()
    {
        fetching = true;
        $('div#lastPostsLoader').html('');
        $.get("_ajax.php?api=getPlaylistTracks&id=<?php echo $id; ?>&action=getLastPosts&lastID="+$(".wrdLatest:last").attr("id"),
        function(data){
            if (data != "") {
            $(".wrdLatest:last").after(data);
            setTimeout(function(){
                fetching = false;
            },300);
            $('div#lastPostsLoader').empty();
        }
    });
    };

    $(window).scroll(function(){
        var bufferzone = $(window).scrollTop() * 0.20;
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !fetching) {
            lastPostFunc();
        }
    });

    // JS for the ajax call to populate the modal window

     $('.music_info').click(function(){
       var id = $(this).data('id');
       $.ajax({
        url: '_ajax_player.php',
        type: 'post',
        data: {id: id},
        success: function(response){ 
          $('.modal-body').html(response);
          $('#MusicModal').modal('show'); 
        }
      });
     });

});

_ajax_player.php

if(isset($_POST['id'])) {
    $id = $_POST['id'];
    $html = "<iframe src='https://open.spotify.com/embed?uri=$id' width='100%' height='300' frameborder='0' allowtransparency='true'></iframe>";
} else {
    $html = null;
}

echo $html;

This is an example of the HTML I'm using to allow a user to click a button to populate the modal with an iframe that allows them to play a spotify track:

<a data-id='spotify:track:1SKPmfSYaPsETbRHaiA18G' class='music_info btn btn-info' style='margin:0px; padding:0px 7px 0px 7px;'>Play Track</a>

This all works fine - as long as the HTML that contains the play button is on the page when the page loads.

I have some more ajax which loads in additional tracks as the user scrolls down the page.

Those additional tracks are loaded into this div:

<div id='lastPostsLoader'></div>

The issue I have is that the buttons that appear in that DIV which are populated by ajax don't fire the ajax call to load the modal content.

The format of the HTML delivered by the ajax is identical to the format of the HTML that appears on the first few tracks which are displayed on page load, but for some reason, when the content is loaded into the DIV, the ajax to populate the modal body does not fire.

There are no errors in the console, it's just that when I click the button, nothing happens.

Maybe what I'm trying to do isn't possible, but I thought I'd ask if there's a way to solve this.

来源：https://stackoverflow.com/questions/65755112/bootstrap-jquery-to-populate-modal-content-does-not-fire-when-delivered-by-ajax

标签

javascript

html

jquery

twitter-bootstrap