Jquery prettyPhoto и звезда конфликт .... DOM не загружается?

Question

Я работаю над системой онлайн-заказа для клиентов фотографии: Здесь . (Простите за необходимость входа).

После входа в систему пользователь может оценивать изображения с использованием звездочек, перечисленных под каждым изображением, а затем просматривать 3-звездочные фотографии или 4-звездочные фотографии и т. Д. Однако, когда пользователь нажимает на изображение, лайтбокс расширяется ( prettyPhoto, а именно), который содержит изображение, а также звезды, перечисленные ниже. Я хочу, чтобы пользователи могли пометить изображение в лайтбоксе, но после инициализации лайтбокса prettyPhoto JavaScript не передается. Следовательно, они не могут оценивать изображения в лайтбоксе. Я слышал о чем-то похожем на это, но понятия не имею, как решить проблему. Любая помощь будет оценена. Спасибо!

Answer 1

Вы пометили это как "ajax", это потому, что система звездного рейтинга втягивается через ajax? Если это так, то проблема заключается в (наиболее вероятном) событии щелчка, связанном со звездами. Вам нужно будет использовать «живые» или «делегирующие» функции jQuery.

Это также имеет место, если вы используете javascript для записи HTML-кода фрагмента звездочки в DOM в любое время после начальной загрузки страницы (или после того, как событие click изначально связано).

Или проблема может быть в разметке селектора ... если, например, у вас система звездного рейтинга, это что-то вроде:

<ul id="star-rating-system">
    <li><img href="star.png" alt="star" /></li>
    <li><img href="star.png" alt="star" /></li>
    <li><img href="star.png" alt="star" /></li>
    <li><img href="star.png" alt="star" /></li>
</ul>

Тогда может возникнуть проблема с наличием на странице 2 вещей с одинаковым идентификатором, что может вызвать проблему.

Как вы думаете, вы могли бы предоставить немного больше информации для большей ясности? Например, HTML-код для звездной рейтинговой системы и любая информация о том, как или если вы изменили исходный JavaScript-код prettyPhoto.

Answer 2

Работает ли это для вас:

$.noConflict();
$(function($) {
     //you jquery here
});