Как встроить внешний js-скрипт в мобильные функции jquery / что включить?

Question

Как встроить внешний js-скрипт в мобильные функции jquery / что включить?

0

Мое общее намерение состоит в том, чтобы переопределить функцию.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.

Спасибо за вашу помощь, люди.

OscuroAA 06 май 2014, в 04:40

Источник

Теги:

javascript

jquery

html

jquery-mobile

1 ответ

Ещё вопросы

marcineck · Accepted Answer · 2014-05-06T01-11-00.000Z

Вы правы - порядок сценария важен (все библиотеки должны быть загружены, прежде чем вы сможете обратиться к ним).

Вы можете использовать альтернативный 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/

Ты гений. Это работает. Если я хочу разместить этот скрипт во внешнем файле, могу ли я просто связать файл внизу страницы? Кроме того, большое спасибо!
Не гений мой друг;), но рад, что смог помочь. Да, вы можете связать свои сценарии перед закрывающим тегом </ body>. Это также увеличит скорость загрузки страницы (будет отображаться быстрее).