使用jQuery的.load（）加载页面

Question

After trying to get this to work for hours I turn to you guys.

I want to load a page into a div tag using jQuery. The page I'm loading has a HTML5 media player:

<h3> {{ title }} </h3>
<audio controls autoplay>
    <source src="/static/media/{{ song }}" type="audio/mp3">
    Your browser does not support this audio format.
</audio>

when I load the page directly it works fine. When I do it like this:

<script type="text/javascript">
$(function() {

    $( ".song" ).click(function() {
        alert('hello')
    });

    $("#mp").load("/playsong?song_id=53847b72936aa27d640039f7");

});
</script>

It works fine (and the hello message works!)

But when I put the load command inside the .click() event, it does not work:

<script type="text/javascript">
$(function() {

    $( ".song" ).click(function() {
        alert('hello')
        $("#mp").load("/playsong?song_id=53847b72936aa27d640039f7");
    });

});
</script>

I am using flask on the backend and in all cases the code on the backend gets executed.

Answer 1

try this:

<script type="text/javascript">
    $(function() {

        $(document).on("load","#mp","/playsong?song_id=53847b72936aa27d640039f7");
        $( ".song" ).click(function() {
            alert('hello')
            $( "#mp" ).trigger( "load" );
        });

    });
</script>

let me know if this works, 'cause I have a backup answer!