text Ajax新项加载问题

Posted 2021-04-30

https://aiocollective.com/blog/click-doesn-t-work-after-ajax-load-jquery/

// 

function menuVideo() {
    var videoSrc = '' ;
    jQuery(document).on('click', '.video-btn' ,function() {  // this works because it adds new elements "load" and now our event listeners are aware of these new elements
    // this wont work because click works on current "existing" elements, 
    // any new elements added via ajax are invisible and will just return null
    // jQuery('.video-btn').click(function() {  
    
        videoSrc = jQuery(this).data( "src" );
    });
    console.log('Video Src: ' + videoSrc );

    // when the modal is opened dont autoplay it
    jQuery('#myModal').on('shown.bs.modal', function (e) {
        // Update video src with the one that was currently clicked, using fadeIn for a smooth transition
        jQuery("#video").attr('src',videoSrc + "?rel=0&showinfo=0&modestbranding=1&autoplay=0" ).fadeIn();
    }) ;

    // stop playing the youtube video when I close the modal
    jQuery('#myModal').on('hide.bs.modal', function (e) {
        // When this video is closed, clear video attribute src so that it does not display the previously played video
        // before showing the next one
        jQuery("#video").attr('src', '') ;
    }) ;
}