2

我有一个使用 mediaelement.js 音频播放器插件的简单页面。正常加载时，播放器连接并正常运行。但是，当页面通过 ajax 加载时，mediaelementplayer 不会附加到音频标签。
我使用此代码通过 ajax 和 jquery 调用文件：

<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>

音频播放器页面是：

<!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>

我尝试了很多组合，包括使用 on、live、success 以及在文档之间移动 css/js 链接，但这些都让情况变得更糟。
当通过 ajax 加载时，我该怎么做才能让文件附加 medaielementplayer？

4

1 回答 1

1

尝试将 mediaelementplayer() 函数调用放在对我有用的 ajax 成功函数中。因此，除非您想使用 .ajax 而不是 .load ，否则您需要将其作为第二个参数传递给 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-25T10:18:00.563 回答