php and jquery button

[Glenskie]

I have this button for my like system and for some reason i have to refresh after i click it again... i would like it to be that when i click it it changes the class and i can click it again and do the other function... please help thank you... 

 

 

JQUERY:

<script type="text/javascript">
$(document).ready(function(){
 $('[name="like"]').on("click", function(){
  if($(this).attr('title')=='like'){
   $.post('/like.php',{imid:$(this).attr('id'),action:'like'});
    $(this).removeClass('like').addClass('unlike');
    $(this).attr('title','unlike');
    $(this).attr('name','unlike');
  }
});
    $('[name="unlike"]').on("click", function(){
   if($(this).attr('title')=='unlike'){
    $.post('/like.php',{imid:$(this).attr('id'),action:'unlike'});
     $(this).removeClass('unlike').addClass('like');
     $(this).attr('title','like');
     $(this).attr('name','like');
    }
  });
});
</script>

PHP:

$likes = mysql_query("SELECT lid FROM likes WHERE uid='$id' AND imid='$photoid'");
if(mysql_num_rows($likes)==0){
$likethis = '<div class="like" title="like" id="'.$photoid.'" name="like"></div>';
}else{
$unlikethis = '<div class="unlike" title="unlike" id="'.$photoid.'" name="unlike"></div>';
}

 

[requinix]

That [name=like] selector you have only applies when adding the event handler. Changing the name won't suddenly make the other handler be applied to it.

 

Use just one handler for both like and unlike, and use the class/title/name to decide what action to take.