ASP.NET MVC中使用blur-overlay插件报错：$target.blurOverlay is not a function

Let's break down why you're hitting this error and walk through the fixes—this is almost always a script loading order issue with jQuery plugins.

The Root Cause: Script Loading Order #

jQuery plugins like blur-overlay rely on jQuery being loaded first, since they attach their methods directly to the jQuery $ object. Looking at your BundleConfig, you've loaded blur-overlay.js before jQuery itself:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  "~/Scripts/blur-overlay.js", // ❌ Loaded before jQuery exists
  "~/Scripts/jquery-{version}.js",
  ...
));

When the plugin runs, jQuery isn't available yet, so it can't add the blurOverlay method to the jQuery prototype. That's exactly why you get the "not a function" error.

Step-by-Step Fixes #

1. Reorder Your Script Bundle
   Move jQuery to the top of your bundle so it loads first, then the plugin and other dependent scripts:

   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
     "~/Scripts/jquery-{version}.js", // ✅ jQuery loads first
     "~/Scripts/jquery-ui-{version}.js",
     "~/Scripts/blur-overlay.js", // ✅ Plugin loads after jQuery
     "~/Scripts/lightbox-plus-jquery.min.js",
     "~/Scripts/CustomNavbar.js"));
   

2. Verify Scripts Are Loading Properly

   • Open your browser's DevTools (F12) and go to the Network tab. Refresh the page and confirm blur-overlay.js loads with a 200 status code (no 404 errors).
   • Double-check the file path: Make sure blur-overlay.js exists in your project's ~/Scripts directory, and the filename matches exactly (case sensitivity matters if you're deploying to Linux servers).

3. Clear Browser Cache
   Browsers often cache old versions of script bundles. Force a hard refresh with Ctrl + F5 to load the updated bundle. For development, you can also disable bundle optimization to avoid cached assets:
   Add this to your Global.asax.cs in the Application_Start method:

   #if DEBUG
   BundleTable.EnableOptimizations = false;
   #endif
   

4. Check for Conflicting Scripts
   Ensure no other scripts are overriding the $ variable (like if you're using jQuery.noConflict() somewhere). If that's the case, replace $ with jQuery in your custom script:

   jQuery(document).ready(function () {
     var $target = jQuery('#page');
     $target.blurOverlay({ ... });
   });
   

Additional Troubleshooting #

If the error persists, check the Console tab in DevTools for other errors that might be stopping the plugin from loading. For example, a syntax error in another script could halt execution before blur-overlay initializes.

内容的提问来源于stack exchange，提问作者Mohsen Jafari