Using jQuery .load() - Not working

$("#link1").click(function(){
$("#div1").load('../test.html');
return false;
});

This is an incredibly simple .load() function that simply does not seem to be working. Website has a 'js' folder where this code is being called in 'my-scripts.js' (within a doc ready function), test.html is located one directory up from the js folder (the main website folder) yet clicking the anchor with the 'link1' id does nothing.

EDIT: I've tried taking out the '../' too, and still nothing.

EDIT: This is a local w开发者_运维问答ebsite using WAMP - It's a Wordpress theme I'm making, too if that helps.

FINAL EDIT: Turns out since test.html wasn't in the root directory (outside of the wordpress theme folder) it wasn't finding it... strange since everyone suggested it should be in the same location as the calling html/php file. Thanks everyone.

Apologies in advance for possible lack of information as it's my first post.

What could be the cause? Is the mark up correct? Thanks.

Weird question, since it seems to have been resolved completely in the comments.

FINAL EDIT: Turns out since test.html wasn't in the root directory (outside of the wordpress theme folder) it wasn't finding it... strange since everyone suggested it should be in the same location as the calling html/php file. Thanks everyone.

Assuming a document root (ie. the base WordPress directory) of:

/var/www

And a theme directory of:

/var/www/wp-content/themes/my-theme

And a theme template file of:

/var/www/wp-content/themes/my-theme/js/my-scripts.js

If you want to display /var/www/wp-content/themes/my-theme/test.html, you need to construct the .load() URL in relation to the page being displayed; the actual file on disk is irrelevant (i.e. don't construct the path relative to my-scripts.js). You would probably want to use the absolute path:

$('#div1').load('/wp-content/themes/my-theme/test.html');