JQuery не распознает селектор #id, кажется, зависит от URL

Question

Я пишу приложение Ruby on Rails. Следующий код jQuery включен в тег head файла index.html.erb, который является шаблоном для всех страниц сайта.

<script>
  $(document).ready(function() {
    $("#select_mailshot").click(function () {
      alert('mailshot');
      document.location.href = "/products/1";
    });
    $("#select_blog").click(function () {
      alert('blog');
      document.location.href = "/messages";
    });
    $("#select_contact").click(function () {
      alert('contact');
      document.location.href = "/contacts/1";
    });
  });
</script>

(там есть шаги оповещения для отладки)

Следующий HTML-код в index.html.erb

<ul>
  <li id="select_mailshot">Mailshot</li>
  <li id="select_blog">Blog</li>
  <li id="select_contact">Contact us</li>
</ul>

Предполагается, что это эффективно создает 3 кнопки.

При нажатии на любую кнопку из http://myurl.com/ все работает.

При нажатии на любую кнопку из http://myurl.com/messages (перейти к ней по средней кнопке) все работает

При запуске с http://myurl.com/products/1 все перестает работать (оповещения не срабатывают). Фактически при запуске с http://myurl.com/anything/id он перестает работать.

Я пытался решить эту проблему часами, и единственное различие между рабочими и нерабочими условиями - это, насколько я вижу, URL.

Может ли кто-нибудь пролить свет на то, что здесь происходит?

Answer 1

Что тебе говорит firebug? У вас есть ошибки JavaScript на странице? Если так, то кто они? Вы уверены, что библиотека jQuery правильно включена в более глубокие страницы (т.е. это относительный путь?)

Answer 2

Является ли этот javascript встроенным?

Если нет, то, возможно, ссылка относительная, поэтому при попытке загрузить ее из сообщений / 40 вам потребуется .. / script.js . Другое решение - использовать абсолютные URL-адреса (http://myurl/script.js) или виртуальные (/script.js).

).

Answer 3

Я использовал FaceBox для создания модальных оверлеев и не мог понять, почему у меня такая же проблема.

Оказывается, что слушатель не был прикреплен к элементам HTML, пока он не был виден. (Элементы были доступны, если я просмотрел источник, но jQuery, похоже, не прикреплял слушателя, пока он не был виден.)

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

Кроме того, я обнаружил, что выбор по идентификатору создает больше проблем, чем класс. Понятия не имею почему. (Нет, дубликатов не было.)

Надеюсь, это поможет кому-то с такой же проблемой!

Answer 4

Благодаря cherouvim и digitaljoel.

Это произошло из-за того, что файлы javascript были включены относительно текущего URL.

В заголовок тега включено следующее

<script type="text/javascript" src="javascripts/jquery-1.3.2.js"></script>

Я изменил его на

<script type="text/javascript" src="/javascripts/jquery-1.3.2.js"></script>

(обратите внимание на лишние "/" в атрибуте src) и все работает как положено.

Я решил это после проверки журналов ошибок на сервере и в браузере.

Чувствую себя немного глупым, но хорошо усвоив урок.