jQuery function working in test page but not the whole website

So jQuery is getting the best of me again :(

I was wondering if any of you could help me figure out why a certain jQuery function I created wont work in one environment but does in another.

$("#processor li").click(function() {
    $("#processor li").removeClass("active-line");
    $(this).addClass("active-line");
});

This is the HTML that the above function works from

<ul id="processor">
    <li>
        <input id="cpu-1" type="radio" value="1" name="cpu">
        <label for="cpu-1">Intel&reg; Core&trade; i3 2100 3.1GHz</label>
    </li>
</ul>

So far I have tested this in a separate file in which it worked, but when imported back into the website the functionality stopped. I tested the code in the test page with $(document).ready(function() { and without and both ways worked fine and have tested th开发者_如何学编程e same in the whole website and it still did not help the situation.

I have also tried doing very absolute paths when calling the element in the jQuery function and not and still it does not work in the website.

So I hope someone out there can help me figure out why the function will not work in the full website.

Thanks in advance,

Dan.

you would have to use

.live('click', function() {

instead of

.click(function() {

if the content comes via ajax

By the way, you have a logical problem:

$("#processor li").removeClass("active-line"); == $(this).removeClass("active-line");

in that case, because you only have one "li Tag".

In other words, when you click you are always adding class "active-line"

You need to check for differences between your website and the separate page,look for:

• More than one #processor element, because no two elements can have the same id
• Check for differences in the number of li elements
• Check for other scripts running which can affect these elements(probably by checking the DOM variables)
• Any css styles which can prevent you from clicking on the element such as a div ontop of them