Jquery prettyPhoto and star conflict....DOM not loading?

I'm working on an online ordering system for photography clients: Here. (Forgive the requirement of having to sign in).

After signing in, the user is able to rate pictures using the stars listed below each picture, then subsequently view 3 star pics, or 4 star pics, etc. However, when the user clicks on an image, a lightbox expands (prettyPhoto namely) which contains the picture as well as the stars listed below.开发者_如何学编程 I want users to be able to star a picture within the lightbox, but the javascript is not being passed after the prettyPhoto lightbox is initialized. Consequently, they can't rate pictures within the lightbox. I've heard of something similar to this, but have no idea about how to go about tackling the problem. Any help would be appreciated. Thanks!

You labeled this as "ajax", is that because the star rating system is being pulled in via ajax? If so, then the problem would be the (most likely) click event bound to the stars. You would need to use jQuery's "live" or "delegate" functions.

This is also the case if you're using javascript to write the HTML of the star selection piece to the DOM any time after the page is initially loaded (or after the click event is initially bound).

Or the problem could be with the selector markup... if, for example, you're star rating system is something like:

<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>

Then there may be an issue with having 2 things on the page with the same ID, which would cause a problem.

Do you think you could provide a bit more information for more clarity? For example, the HTML for the star rating system, and any information about how or if you altered the original prettyPhoto javascript.

Does this work for you:

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