mediaelement.js在通過ajax加載時失敗

我有一個使用mediaelement.js audioplayer插件的簡單頁面。正常加載時，播放器將正確連接並正常工作。但是，當頁面通過ajax加載時，mediaelementplayer不會附加到音頻標籤。
我用這個代碼調用通過AJAX和jQuery文件：mediaelement.js在通過ajax加載時失敗

<html> 
<head> 
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 

    $(".ajax_vocab_link").click(function(evento){ 
    evento.preventDefault(); 
    var ajaxDivNum = $(this).attr('id').split('_')[1]; 
     var searchTerm = $(this).attr('title'); 
     $("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm} 
    ); 
    }); 

}) 
</script> 

</head> 
<body> 
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p> 
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div> 

</body> 
</html>

的audioplayer頁：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

<!-- Audio Player CSS & Scripts --> 

    <script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script> 
    <link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen"> 

    <!-- end Audio Player CSS & Scripts --> 

<script> 
     $(document).ready(function() { 

         $('#audio-player-vocab0').mediaelementplayer({ 
       alwaysShowControls: true, 
       features: ['playpause'], 
       audioVolume: 'horizontal', 
       audioWidth: 400, 
       audioHeight: 120 
      }); 


    }); 
    </script> 



</head> 
<body> 



<div class='display_vocab_container' > 
<div class='display_vocab_text' > 
<div class='audio-player-slim'> 
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio> 
</div> 
</div> 
</div> 


</body> 
</html>

我試過很多的組合，包括使用上，生活，成功和移動文件之間的css/js鏈接，但這些都使情況變得更糟。
我可以通過ajax加載時獲取文件以附加medaielementplayer？

來源

2013-08-19 Chris Bartlett

也見https://stackoverflow.com/questions/34891421/wordpress-audio-player-not-loading-when-the-content-is-loaded-through-ajax-medi – rinogo

嘗試將mediaelementplayer（）函數調用放入ajax成功函數中，這對我來說很有用。所以除非你想用.ajax代替.load，否則你需要將它作爲加載函數的第二個參數傳遞。或者使用http://api.jquery.com/ajaxSuccess/

$(".ajax_vocab_link").click(function(evento) { 
    evento.preventDefault(); 
    var ajaxDivNum = $(this).attr('id').split('_')[1]; 
    var searchTerm = $(this).attr('title'); 
    $("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() { 
     $('#audio-player-vocab0').mediaelementplayer({ 
      alwaysShowControls: true, 
      features: ['playpause'], 
      audioVolume: 'horizontal', 
      audioWidth: 400, 
      audioHeight: 120 
     }); 
    }); 
});

來源

2013-09-25 10:18:00

mediaelement.js在通過ajax加載時失敗

回答

相關問題