Weird jQuery problem

[tsuby]

I have a basic page, called 'index.php' that has some content on it. When I click on a certain link, it reloads the content of a certain div with the contents of the file called 'blog.php'.

 

'blog.php' contains a link that has a class attribute = 'more':

<a href="#" class="more" id="<?php echo $id; ?>">load more</a>

And I have the following javascript code, in a separate file called 'loadmore.js'(the connection to this file is made in index.php)

$(function() {
	$('.more').on("click",function() {
	        var ID = $(this).attr("id");
		if(ID) {
			$("#more"+ID).html('<img src="/./images/loading.gif"/>');
			$.ajax({
				type: "POST",
				url: "/./server_scripts/ajax_more.php",
				data: "lastmsg="+ ID, 
				cache: false,
				success: function(html){
					$("#main_body").append(html);
					$("#more"+ID).remove(); // removing old more button
				}
			});
		}
		else {
			$(".morebox").html('The End');// no results
		}
	return false;
	})
});

However, when I click on my link and I have breakpoints in my .js file, nothing happens, it just redirects me to the top of the page. 

Do you have any idea what might be wrong? 

[.josh]

you don't even see your ajax call being made? If not, my first guess is that your jQuery click event is being executed before the link exists.

 

If you are sure that it does exist (e.g. doing a console.log('clicked') or something as first line of the click callback) then my 2nd guess is your condition for ID is returning false (your php echo isn't echoing anything). Viewsource and verify that it is outputting an ID.

 

If all this is lined up and you still aren't seeing it.. make sure the ID is unique to the element.

 

sidenote:

 

As far as the redirection to the top of the page, that's happening because of the href='#' in the link.

 

You may need to change this:

 

$('.more').on("click",function() {

to this:

 

$('.more').on("click",function(e) {
  e.preventDefault();

At face value that return false; should be preventing the href from triggering but you apparently have something else going on that's making it happen anyway.. kind of hard to figure out without seeing all this in action on your page. But it could just be happening because the click event is not getting triggered in the first place (refer to above things to check)