Cargas contenido tipo facebook

[azuriguel]

Hola buenas! estoy haciendo una pagina y quiero poner el efecto ajax! os dejo aqui el codigo

home.php

Código:

<div class="container">
<script type="text/javascript">
$(function() {
//More Button
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');

$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("#updates").append(html);
$("#more"+ID).remove();
}
});
}
else
{
$(".morebox").html('The End');

}


return false;


});
});

</script>
<?php
$sql=mysql_query("select * from trueques ORDER BY id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
	$message=$row['descripcion'];
	$msg_id=$row['id'];
	$img=$row['img'];
	$categoria=$row['categoria'];
	$provincia=$row['provincia'];;

?>
<div id="caja">
  <p><a href="trueque.<?=$msg_id?>" rel="tooltip" data-toggle="tooltip"title="<?=$message?>"><img src="upload/<?=$img?>" alt="<?=$message?>"></a></p>
  <p class="text">Trueque en: <?=$rprovincia?></p>
  <p class="text"><?=$categoria?></p>
  <p class="titulo"><a class="btn btn-mini btn-inverse span12" id="boton" href="trueque.<?=$msg_id?>">Ver trueque</a></p>
</div>
<?php } ?>
</div>

ajax_more.php

Código:

<div class="container">
<div class="timeline" id="updates">
<?php
include("config.php");


if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$result=mysql_query("select * from trueques where msg_id<'$lastmsg' order by id desc limit 9");
$count=mysql_num_rows($result);
while($row=mysql_fetch_array($result))
{
$msg_id=$row['ms_gid'];
$message=$row['descripcion'];
?>
 <div id="caja">
  <p><a href="trueque.<?=$row['id']?>" rel="tooltip" data-toggle="tooltip"title="<?=$message?>"><img src="upload/<?=$row['img']?>" alt="<?=$message?>"></a></p>
  <p class="text">Trueque en: <?=$row['provincia']?></p>
  <p class="text"><?=$row['categoria']?></p>
  <p class="titulo"><a class="btn btn-mini btn-inverse span12" id="boton" href="trueque.<?=$row['id']?>">Ver trueque</a></p>
</div>
<?php
}


?>
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
</div>
<?php
}
?>
</div>
</div>

El problema es cuando le doy a <a href="#" id="<?php echo $msg_id; ?>" class="more">more</a> me lleva a la cabecera de la pagina no ejecuta el jquery... soy nuevo en esto, alguien sabe el por que? esta maquetado en boostrap :S

[thorstorm]

Pon un 'event.preventDefault();' donde lo he puesto yo:

Código HTML:

<div class="container">
<script type="text/javascript">
$(function() {
//More Button
$('.more').live("click",function() 
{
event.preventDefault(); //<-----------------------------------------------------------------------------------------
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
 

Con esto previenes el comportamiento por defecto de las etiquetas <a>, entre otras.

[azuriguel]

Muchas gracias!