Question

我有以下代码用于尝试通过函数动态添加jplayers。

function audio_player(audio, title, type) {

    var id = $('.audio').length;

    $('#audio').append('<div id="jquery_jplayer_'+id+'" class="audio"></div><div id="jp_container_'+id+'" class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><div class="jp-time-holder"><div class="jp-current-time"></div><div class="jp-duration"></div></div></div><div class="jp-title"><ul><li>'+title+'</li></ul></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>');


    $("#jquery_jplayer_"+id).jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: audio
            });
        },
        play: function() { // To avoid jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "../js",
        cssSelectorAncestor:"#jp_container_"+id,
        supplied: type,
        errorAlerts: true,
        warningAlerts: false,
        wmode:"window"
    });
}


$(document).ready(function() {
    audio_player("http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", "Test Title", "mp3");
    audio_player("http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3", "Test2 Title", "mp3");
});

使用此代码我收到错误

TypeError: $(...).jPlayer is not a function 

wmode:"window"

当我使用相同的代码时，只在他们的演示中设置（在document.ready（）中的所有javascript并静态声明）一切正常。

关于出了什么问题或如何解决问题的想法？

Answer 1

通过这样做结束解决它：

$(document).ready(function() {
    function audio_player(audio, title, type) {

      var id = $('.audio').length;

      $('#audio').append('<div id="jquery_jplayer_'+id+'" class="audio" data-file="'+audio+'" data-type="'+type+'"></div><div id="jp_container_'+id+'" class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><ul class="jp-controls"><li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li><li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li><li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li><li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li><li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li><li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li></ul><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><div class="jp-time-holder"><div class="jp-current-time"></div><div class="jp-duration"></div></div></div><div class="jp-title"><ul><li>'+title+'</li></ul></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>');

      $('#jquery_jplayer_'+id).jPlayer({
          ready: function(event) {
              $(this).jPlayer("setMedia", {
                  mp3: $(this).attr('data-file')
              });
          },
          play: function() { // To avoid both jPlayers playing together.
              $(this).jPlayer("pauseOthers");
          },
          swfPath: js,
          cssSelectorAncestor:'#jp_container_'+id,
          supplied: type,
          errorAlerts: true,
          warningAlerts: false,
          wmode:"window"
      });
    }

    audio_player("file.mp3", "Test Title", "mp3");
    audio_player("file2.mp3", "Test2 Title", "mp3");
});

动态添加jPlayer

1 个答案: