Problem Scripts on some pages which use jquery aren't initiating.

Scenario Discovering that I could not obtain a script to operate I put a simple test script on the page to be able to test the jquery was functioning.

<script type="text/javascript">
$(document).ready(function (){
      $(".testJavascript").addClass("hover_red");
});
</script>
<p class="testJavascript">This paragraph is to test Javascript</p>

This will give a red-colored border but it won't function.

Troubleshooting I have Attempted I checked for the existence of the jquery core also it seems within the header from the page. Its enqueued and seems to become working properly on another pages, and so i don't have any reason to suspect that it is been corrupted.

I attempted the next tests:

  • Place the above script within the header template, right before the closing header tag
  • Place the script in your body from the page right over the test paragraph that it relates
  • Enqueued the script just in case there is some kind of conflict which i wasn't anticipating. This triggered the page to prevent loading - can't understand why this could result in a problem.. EDIT: After further testing I suspect it was triggered through the $ versus jQuery nomenclature. Getting transformed it the enqueueing of the script no more stops the page loading. however, the script still does not work.
  • Finally since I am a novice and that i always suspect that I am the reason for the issue I place the script and html snippet onto a webpage on my small local MAMP server. It labored not surprisingly. I believe this exonerates my coding but not.

I am bemused in regards to what the reason for the issue may be.

I'd appreciate any suggestions regarding where you can search for the potential supply of the issue.

Thanks.

One possible problem might be that the testJavascript class includes a border in css and seems before hover_red-colored class. If that is the situation, switch them, so hover_red-colored can come after testJavascript inside your css file (or within style tags)

in case your getting jquery conflict check it out using noConflict()

<script type="text/javascript">
    jQeury.noConflict();
    jQeury(document).ready(function ($){
          $(".testJavascript").addClass("hover_red");
    });
</script>

Responding to My Very Own Question

The ultimate fix for your problem ended up being to enqueue the design and style sheet associated with the exam script. I'd recommended the css file using a standard link within the header, put in the header template over the ending header tag. It seems this wasn't working because after i enqueued the design and style file the script labored.