CODEWITHSUNDEEP
jquery
zealisreal
zealisreal

Reputation: 505

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

Upvotes: 1

Views: 84

Answers (3)

Shedokan
Shedokan

Reputation: 1202

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

Upvotes: 0

expertCode
expertCode

Reputation: 533

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"

Upvotes: 0

trampi
trampi

Reputation: 2284

you would have to use 

.live('click', function() {

instead of

.click(function() {

if the content comes via ajax

Upvotes: 2

Related Questions