I'm experiencing an issue where I cannot get my jQuery script to work once a page is published. Based on the answers below, all I need to do is simply run

SP.SOD.executeFunc("sp.js", "SP.ClientContext", function(){
jQuery(document).ready(function ($){    
        var parent = $("#zz12_V4QuickLaunchMenu > ul > li:has('ul')");
        parent.find("span.menu-item-text:first").append("&nbsp; &nbsp;<i class='fa fa-angle-down' aria-hidden='true'></i>");
        parent.closest("li").find("> ul").hide();

        var childUL = $(this).closest("li").find("> ul");
        var isVisible = childUL.is(":visible");

    if (isVisible) {

  else {



except this does not work at all. I am familiar with jQuery, less so with javascript. So I do not know how to call my jQuery inside this javascript function. It looks to me that '$' is being used by another library, how do I ensure it is used inside of this function? Thanks.

  • 1
    if you try with $(function(){ alert("hello world"); }); just like that with no "noConflict" or anything, does it work? Also are you sure your JSfile that contains the jquery code is loaded after the call to the jQuery file? Dec 24 '16 at 0:13
  • yes. it works perfectly fine until i publish the page. so i'm wondering if there is some other sp js that interferes when i publish the page. Dec 24 '16 at 11:20
  • 1
    This is very common issue with MDS in SP 2013...Vadim answered this question a while back here.. Have a look sharepoint.stackexchange.com/questions/104849/… Dec 24 '16 at 14:16
  • Or disable the MDS feature, looks like its gone in the Modern Experiences anyway Dec 26 '16 at 10:11
  • Thanks @RansherSingh. I attempted to utilize SP.SOD to load a simple alert("Working"); and that did not work either. Currently, I have my script loaded in the <head> portion of my custom html masterpage with just a normal script link. Would it be best to try it with the ScriptLink instead? Dec 27 '16 at 1:17

Just in case anyone comes across this, the issue was that SharePoint uses two different IDs for Display and Edit modes in the topNav module. Changing the selector worked for me.


you can try something like below code:

    // wait until jquery load is complete
    function waituntilJqueryLoad() {
       if (window.$)
          setTimeout(function () { waituntilJqueryLoad() }, 50);

  // Execute Script when DOM is ready
  function isLoaded() {

$(document).ready(function () {
    //write your code here

  • Thanks so much! Unfortunately, this didn't work for me either but I appreciate your time all the same. Dec 27 '16 at 1:18
  • never mind.. i'm an idiot; i realized the masterpage linked to the file of the same name in a different site collection. bangs head on desk. Dec 28 '16 at 14:05
  • Waiting for the page to load using setTimeout isn't really the good approach to follow.. Dec 28 '16 at 18:02
  • Thanks @MohamedDerhalli , i have just given an example, but instead of using setTimeout, we can use another thing also as i preferred to use getScript method. Dec 29 '16 at 5:43
  • @user2004758 Please mark it as answer if it helped you :) Feb 15 '17 at 11:05

You should do it this way:

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(yourFunction, "SP.js");
    function yourFunction() {
        var context = SP.ClientContext.get_current();
        //now you have the context, you can do anything here.

This will wait for the jQuery to be loaded, then it will execute everything else, you should not load SharePoint files first, then wait for document to load using jQuery.

  • thanks - this does not work either. i get an error that says object does not support property or method 'ready'... which is weird as hell. Dec 29 '16 at 3:12
  • In which browser are you having this error? Did you try different browsers? Dec 29 '16 at 4:00
  • yes, i tested in both IE and Chrome. the script works in Edit mode, when I Check It In, and then it ceases to work when the page is published regardless of the browser. Dec 29 '16 at 4:30
  • How are you referencing this script? How's jQuery referenced and where? Dec 29 '16 at 5:14
  • jQuery is referenced in the master page with a ScriptLink with LoadAfterUI set to true. The above js is also referenced in the master page but via a normal html script tag. The script tag is placed after the jQuery and everything is in the head of the document. Dec 29 '16 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.