继续获取对象没有来自javascript的方法错误

时间:2014-03-22 21:59:25

标签: javascript jquery html css twitter-bootstrap

在尝试调用jwplayer的setup方法或bootstraps carousel方法时,我一直得到一个Object没有方法错误。

我确实安装了JQuery并且它正常工作,我也可以使用数据属性从引导程序中使用JS,而常规jQuery只能使用这两个。

这是一个小提琴http://jsfiddle.net/S9jDw/

我已经坚持了好几天。

这是我的js代码

$(document).ready(function() {
  jwplayer('.jw-wrapper').setup({
      file: 'http://helpsaverosie.ca/Rosie.m4v',
      image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
      title: 'Rosie',
      width: '100%',
      aspectratio: '16:9',
      mute: 'true',
      autostart: 'true'
  });

});

这是我的html输出

<!DOCTYPE html>
<html class='index'>
  <head>
    <title>Save Rosie</title>
    <meta charset='utf-8'>
    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
    <!-- Use title if it's in the page YAML frontmatter -->
    <link href="/stylesheets/fonts.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script src="/javascripts/bootstrap.js" type="text/javascript"></script>
    <script src="http://jwpsrv.com/library/Xp3HoLIEEeOyYSIACmOLpg.js" type="text/javascript"></script>
    <script src="/javascripts/all.js" type="text/javascript"></script>
    <link href='https://s3-us-west-2.amazonaws.com/rosiesdonations/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'>
    <meta content='width=device-width, initial-scale=1' name='viewport'>
    <script src=''></script>
  </head>
  <body>

    <div class='wrapper'>
      <div id='image-wrapper'>
        <aside class='left-side-image'>
          <img alt='Side Image Left' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Left.gif'>
        </aside>
        <aside class='right-side-image'>
          <img alt='Right Side Image' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie_Right.png'>
        </aside>
      </div>
      <div class='container'>
        <nav class='row main-header'>
          <header class='col-md-12'>
            <h1>Help Save Rosie</h1>
          </header>
        </nav>
        <section class='row main-body'>
          <div class='col-md-12'>
            <div class='jw-wrapper'></div>
            <div class='carousel slide' data-ride='carousel' id='main-carousel'>
              <div class='carousel-inner'>
                <div class='item active'>
                  <img alt='Rosie Picture one' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie1.png'>
                </div>
                <div class='item'>
                  <img alt='Rosie Picture two' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie2.jpg'>
                </div>
                <div class='item'>
                  <img alt='Rosie Picture three' src='https://s3-us-west-2.amazonaws.com/rosiesdonations/Rosie3.jpg'>
                </div>
              </div>
            </div>

        </section>

      </div>
    </div>

  </body>
</html>

1 个答案:

答案 0 :(得分:1)

看起来jwplayer实际上是期望元素的id而不是选择器。

尝试将class="jw-wrapper"更改为id="jw-wrapper"并将您的设置方法更改为:

$(document).ready(function() {
  jwplayer('jw-wrapper').setup({
      file: 'http://helpsaverosie.ca/Rosie.m4v',
      image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
      title: 'Rosie',
      width: '100%',
      aspectratio: '16:9',
      mute: 'true',
      autostart: 'true'
  });

});