jquery not working on other pages

Question

I have a menu placed on website's header. One of the menu links looks like that:

<a href="#" class="controlpanel-link">&nbsp;Control Panel</a>

I have a jQuery function that should make visible a popup:

$(document).ready(function(){
    jQuery(".controlpanel-link").click(function() {
        $("#controlpanel").show();
    });
    jQuery("#close-cp").click(function() {
        $("#controlpanel").hide();
    });
});

As it is in the header, it appears on all pages. On the index page the jQuery is executed, on other pages nothing is happening and the console is not showing any errors. What should I do in this case?
Thank you in advance!

Check that you are adding JQuery library link on all the pages. — divy3993, Oct 06 '15 at 19:22
^in addition to what divy3993 said above, make sure this jQuery function is accessible to all the pages as well — indubitablee, Oct 06 '15 at 19:26
if both these things are accessible, can you show us the actual site/demo so that we can investigate further? otherwise, we're just shooting in the dark. — indubitablee, Oct 06 '15 at 19:29
are you calling the path to jQuery correctly, or linking to the jQuery cdn, could be a path isssue — nykc, Oct 06 '15 at 19:30
it is on localhost. the path is fine. other classes called by jQuery are working, if they are unique in the project. So if the class is figuring in different pages, is working only on index page. — Grigore Dodon, Oct 06 '15 at 19:34

score 0 · Answer 1 · edited May 23 '17 at 12:22

Before we start, I'd clean this code up a little bit. This ensure's that the jQuery object you're interacting with in your code doesn't affect other javascript and vice-versa. It's also shorthand in jQuery for $(document).ready For more insight, see reference on closures below.

(function($){
  $(".controlpanel-link").click(function() {
    $("#controlpanel").show();
  });
  $("#close-cp").click(function() {
    $("#controlpanel").hide();
  });
})(jQuery);

There are a few things that may be contributing to this behavior:

If this is a single page web app, it is possible that the elements you bind click to are not bound when a new view is rendered.
Depending on what other javascript you may have, the elements may not exist on the page.

Debugging

If you haven't already, I suggest at least using your javascript console and console.log statements to see if your click events are actually being triggered. The console will also inform you of any javascript errors your code may be producing. If you're up to it, I'd suggest using breakpoints for more advanced debugging.

References

Javascript closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

jQuery $(document).ready: https://learn.jquery.com/using-jquery-core/document-ready/

console.log: https://developer.mozilla.org/en-US/docs/Web/API/Console/log

"Set a javascript breakpoint in code - in chrome": Set a javascript breakpoint in code - in chrome?

jquery not working on other pages

1 Answers1

Debugging

References