Блог

Главная - Вопросы по программированию - Строка jQuery нарушает работу моей страницы

Строка jQuery нарушает работу моей страницы

#javascript #jquery #debugging #firefox

#javascript #jquery #отладка #firefox

Вопрос:

Итак, я немного работаю над jQuery для сайта, над которым я работаю, и по какой-то причине, когда я помещаю одинарные кавычки внутрь двойных кавычек, Firefox, в его вечной славе, заменяет их двойными кавычками, тем самым нарушая мой код.

Я даже пытался поместить ее во внешний файл javascript, хотя на данный момент я всего лишь создаю прототип. Ничего хорошего. Не загрузил бы файл!

 $("#clips").after("<ul id='slideshow-nav'><li><a id='gallery-next' href='#' title='View the next piece'>Next</a></li><li><a id='gallery-prev' href='#' title='View the previous piece'>Prev</a></li></ul>");

Я делаю что-то не так?

Ответ №1:

Вы рассматривали:-

 $("#clips").after('<ul id="slideshow-nav"><li><a id="gallery-next" href="#" title="View the next piece">Next</a></li><li><a id="gallery-prev" href="#" title="View the previous piece">Prev</a></li></ul>')

?

Хотя вполне нормально, что ‘ и » использование взаимозаменяемо в Javascript, использование ‘ для разграничения значений атрибутов в HTML / XML встречается редко.

Ответ №2:

Вы пробовали переключать одинарные и двойные кавычки?

 $("#clips").after('<ul id="slideshow-nav"><li><a id="gallery-next" href="#" title="View the next piece">Next</a></li><li><a id="gallery-prev" href="#" title="View the previous piece">Prev</a></li></ul>');

Ответ №3:

Я не могу воспроизвести ошибку в FF3.5.

 <div id="clips">test</div>
<script type="text/javascript">
  $("#clips").after("<ul id='slideshow-nav'><li><a id='gallery-next' href='#' title='View the next piece'>Next</a></li><li><a id='gallery-prev' href='#' title='View the previous piece'>Prev</a></li></ul>");
</script>

дает мне:

 <div id="clips">test</div>
<ul id="slideshow-nav">
  <li><a title="View the next piece" href="#" id="gallery-next">Next</a></li>
  <li><a title="View the previous piece" href="#" id="gallery-prev">Prev</a></li>
</ul>

Ответ №4:

У меня отлично работает в FF 3.5.2. Вы оборачиваете ее в $ (function() { });, чтобы убедиться, что DOM загружен?

 <html>
<head>
<title>tt</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
    $(function() {
         $("#clips").after("<ul id='slideshow-nav'><li><a id='gallery-next' href='#' title='View the next piece'>Next</a></li><li><a id='gallery-prev' href='#' title='View the previous piece'>Prev</a></li></ul>");
    });
</script>
</head>

<body>
<div id='clips'></div>
</body>
</html>

Ответ №5:

Выглядит неплохо. Несколько вещей, которые нужно попробовать:

Реструктурировать для удобства чтения (тот же код, с использованием массива с .join(«) в конце):

 $("#clips")
.after( [
   "<ul id='slideshow-nav'>",
       "<li><a id='gallery-next' href='#' title='Next piece'>Next</a></li>",
       "<li><a id='gallery-prev' href='#' title='Previous piece'>Prev</a></li>",
   "</ul>"
].join('')
);

Переименуйте идентификаторы, просто чтобы убедиться, что на странице нет конфликтов (часто имеет странные ошибки):

 $("#clips")
.after( [
   "<ul id='slideshow-nav2'>",
       "<li><a id='gallery-next2' href='#' title='Next piece'>Next</a></li>",
       "<li><a id='gallery-prev2' href='#' title='Previous piece'>Prev</a></li>",
   "</ul>"
].join('')
);

Используйте все двойные кавычки с экранирующими символами:

 $("#clips")
.after( [
   "<ul id="slideshow-nav2">",
       "<li><a id="gallery-next2" href="#" title="Next piece">Next</a></li>",
       "<li><a id="gallery-prev2" href="#" title="Previous piece">Prev</a></li>",
   "</ul>"
].join('')
);

Ответ №6:

Хм, это работает у меня?

http://pastebay.com/51896

Ответ №7: