正在加載Ajax div未執行jQuery腳本

Question

我正在從已加載的元素（按鈕）內單擊加載Ajax div，但是當該Ajax div加載時，jQuery腳本未運行。

腳本全部在Wordpress中運行，所以有一個noConflict包裝。

示例代碼中包含一些方法來擺脫在Ajax div容器中加載的div，這完全是因爲我不確定我的語法是否正確或腳本是否未加載。

在jQuery腳本的事件序列中，它確實要求播放video元素，但不會僅僅運行，但如果元素不存在則不做任何事情？或者，當沒有video元素時，這是什麼打破了腳本？

打開一個Ajax容器誰的src後的鉻控制檯誤差不.m4v：

Uncaught TypeError: Cannot call method 'play' of undefined

<script type="text/javascript"> 
// design and manage behavior of video/audio control bar 
    jQuery(function($){ 
     $(document).ready(function() { 
      $.ajaxSetup({ cache: false }); 

      var video = document.getElementById("postvideo"); 
      var playButton = document.getElementById("play-pause"); 
      var muteButton = document.getElementById("mute"); 
      var fullScreenButton = document.getElementById("full-screen"); 
      var seekBar = document.getElementById("seek-bar"); 

      // remove media player elements if element is not an m4v 
      $('#postvideo[src$=".jpg"]').remove(".controlbar").remove(".postMedia"); 
      $('#postvideo[src$=".m4v"]').remove(".controlbar"); 

      // elements whose src doesn't end with `.m4v` 
      $('#postvideo').not('[src$=".m4v"]').empty().each(function() { 

       if ($('.postMedia').length) { 
        // move postMedia to root of #fold-above 
        $('.postMedia').detach().prependTo($('#fold-above'));    
        $('video').get(0).play(); 
       } else { 
        $('.controlbar').remove(); 
        $('.postMedia').remove(); 
       } 
      });   

      // button to show or hide the post text content 
      $(".showText").click(function(){ 
       $(".ajaxPostText").fadeToggle('fast'); 
       $(".ajaxPostTitle").fadeToggle('fast'); 
       $(".aboveTheFold .postmetadata").fadeToggle('fast'); 
       $(".controlbar").fadeToggle('fast'); 

      }); 

      // button to close entire post viewer panel 
      $('.closeUp').click(function(){ 
       $("#fold-above").empty().fadeToggle(); 
      }); 

      $(".play-pause").click(function(){ 
       if (video.paused == true) { 
        video.play(); 
        playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/playButton.png' />"; 
       } else { 
        video.pause(); 
        playButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/pauseButton.png' />"; 
       } 
      }); 

      $(".mute").click(function(){ 
       if (video.muted == false) { 
       video.muted = true; 
       muteButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/volumeButton2.png' />"; 
       } else { 
       video.muted = false; 
       muteButton.innerHTML = "<img src='<?php echo get_template_directory_uri(); ?>/media/volumeButton1.png' />"; 
       } 
      }); 

      $(".full-screen").click(function(){ 
       if (video.requestFullscreen) { 
       video.requestFullscreen(); 
       } else if (video.mozRequestFullScreen) { 
       video.mozRequestFullScreen(); // Firefox 
       } else if (video.webkitRequestFullscreen) { 
       video.webkitRequestFullscreen(); // Chrome and Safari 
       } 
      }); 

      seekBar.addEventListener("change", function() { 
       var time = video.duration * (seekBar.value/100); 
       video.currentTime = time; 
      }); 
      video.addEventListener("timeupdate", function() { 
       var value = (100/video.duration) * video.currentTime; 
       seekBar.value = value; 
      }); 
     }); 
    }); 
</script> 

Answer 1

您需要顯示一個HTML $（'video'）。get（0）.play（）;

你有這個標記 <video> ，如果你沒有這個標記在HTML代碼中，$（視頻）是不確定的，並得到（0）未定義，未定義的對象上調用播放功能會造成你看到的錯誤。

如果你的視頻標籤是在你的頁面中動態創建的，我建議你學習jQuery live（）函數。 http://api.jquery.com/live/

Answer 2

嘗試與所有點擊聽衆

 $(document).on('click','#your_div',function(){ 
}); 

對於爲例

使用

$(document).on('click','.closeUp',function(){   $("#fold-above").empty().fadeToggle(); 
     });