Question

我的总体意图是覆盖具有特定id的元素的.click函数，这样一个按钮将只替换特定元素的内容（而不是整个页面）。

我认为我在嵌入脚本文件时遇到了麻烦，或者在脚本文件中的某些编码中遇到了麻烦。

我得出了这个结论，因为当我的HTML和JS文件被粘贴到JSFiddle.net上各自的窗口时，它可以工作。

但是，当我尝试从localhost运行该文件时，就好像我的.js文件没有覆盖.click函数。

感谢任何帮助。

  <!DOCTYPE html>
  <html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">

     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

     <script src="./scripts/navScript.js"></script>

     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <!-- COURSES page -->
  <div data-role="page" id="noteVote">
     <div data-role="header" align="middle" class="header">
        <img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- This is the Navbar -->
        <div data-role="navbar" data-grid="c" id="navBar">
           <ul>
              <li><a class="ui-btn" id="coursesButton">Courses</a></li>
              <li><a class="ui-btn" id="searchButton">Search</a></li>
              <li><a class="ui-btn" id="submitButton">Submit</a></li>
              <li><a class="ui-btn" id="accountButton">Account</a></li>
           </ul>
        </div>
     </div>

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="coursesContent">
           Main section
     </div>

     <!-- FOOTER -->
     <div data-role="footer" class="footer">
        SomeText
     </div>
  </div>
  <!-- /COURSES -->

  <!-- SEARCH -->
  <div data-role="page" id="search">

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="searchContent">
        <h1>Search Section</h1>
     </div>

  </div>

  </body>
  </html>

我相信我已经按照正确的顺序链接了脚本：JQuery，my_custom，JQuery Mobile。

在我的自定义脚本中是否存在错误？

  $("#searchButton").click( function() {
     $('#coursesContent').html( $('#searchContent').html() )
  });

如果有更好/更简单的方法，请告诉我。

我在互联网上搜索了解决方案，我发现加载脚本的顺序非常重要。我也尝试在“$（document）.bind（”mobileinit“，function（）{”函数中插入我的脚本代码，但这并没有产生我希望得到的结果。

我显然是JavaScript和JQuery的新手。

感谢您的帮助，人们。

Answer 1

你是对的 - 脚本的顺序很重要（在你引用它们之前必须加载所有的lib）。

您可以为此purpouse使用替代javascript：

$(document).ready(function()
                  {
                      $(document).on("click","#searchButton",function(e)
                                     {
                                         e.preventDefault();
                                         alert('And now what? Click will not take me anywhere...');
                                         $('#coursesContent').html($('#searchContent').html());                                        
                                     });
                  });

尝试将此代码放在页面底部（</body>之前）并检查浏览器控制台是否存在任何其他JS错误。这是一个有效的例子：http://jsfiddle.net/3Qaq7/1/

如何嵌入外部js脚本来覆盖jquery移动功能/包含哪些内容？

1 个答案: