Question

I have a ‘div’ container ‘obj_image’ having another ‘div’ ‘like_icon’ which if the user clicks in it, sends an ajax request and if it is success, change the class of the ‘like_icon’ for other. My problem is if I click once, it great, but the next time the element don’t do anything, and I have to mouse leave of the ‘obj_image’ element to click another time.

HTML

<div class="obj_image">
    <div class="like_icon"></div>
</div>

JS

$(document).ready(function() {
$('.obj_image').hover( function() {

     $('.obj_image:hover').find('.like_icon').bind('click', function() {            
        $.ajax({
            async: false,
            url:'url', 
            type: "POST",
            success: function(){
                $('.obj_image:hover').find('.like_icon').addClass('no_like_icon').removeClass('like_icon');
            },                
        });
     });

     $('.obj_image:hover').find('.no_like_icon').bind('click', function() {
        $.ajax({
            async: false,
            url:'', 
            type: "POST",
            success: function(){
                $('.obj_image:hover').find('.no_like_icon').addClass('like_icon').removeClass('no_like_icon');
            },                
        });
     });
});
});

Answer 1

Should be something like this:

$(document).ready(function() {
$('.obj_image').hover( function() {

     $(this).find('.like_icon').bind('click', function() {            
        $.ajax({
            async: false,
            url:'url', 
            type: "POST",
            success: function(){
$(this).find('.like_icon').addClass('no_like_icon').removeClass('like_icon');
            },                
        });
     });
}, // this is the important part
function(){ //call the mouseleave function
     $(this).find('.no_like_icon').bind('click', function() {
        $.ajax({
            async: false,
            url:'', 
            type: "POST",
            success: function(){
$(this).find('.no_like_icon').addClass('like_icon').removeClass('no_like_icon');
            },                
        });
     });
});
});