A hover event I have does not work after an ajax load, it only works on initial page load

Question

I am having an issue where a hover event I have does not work after an ajax load, it only works on initial page load. This is the code I am using currently:

$(document).ready(function() {
  $('.like').hover(
        function () {
          var id=this.id;
          values=id.split('.');
                  id=values[0];
                  type=values[1];
          var arrow_box_id='arrow_box'+'_'+id;
          document.getElementById(arrow_box_id).style.display = "";
          jQuery.ajax({
                 url: 'fetch_likes_comment.php',
                 type: 'POST',
                 data:{ 
                     id: id, 
                     type:type
           },
           beforeSend: function() {
               },
           complete: function() { 
               }
             }).done(function( msg ) { 
                 document.getElementById(arrow_box_id).innerHTML = msg;
               });
        }, 
            function () {
           var id=this.id;
           values=id.split('.');
                   id=values[0];
                   type=values[1];
           var arrow_box_id='arrow_box'+'_'+id;
                   document.getElementById(arrow_box_id).style.display = "none";
            }
    );
});

I am guessing you need to use delegate to bind the event. http://api.jquery.com/delegate/ — skajfes, Jun 11 '13 at 07:43
@skajfes Delegation is deprecated (superseded by `.on` to be precise). — Maxim Kumpan, Jun 11 '13 at 07:46
possible duplicate of [Is it possible to use jQuery .on and hover?](http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover) — Barmar, Jun 11 '13 at 07:46

Suresh Atta · Answer 1 · 2013-06-11T07:48:45.327

2

Do

$(document).on("mouseover",'.like',function()
{
    //stuff to do on mouseover
})."mouseout",'.like',function()
{
    //stuff to do on mouseout
});

edited Jun 11 '13 at 07:48

answered Jun 11 '13 at 07:38

Suresh Atta

120,458
37
198
307

You also need a `mouseout` handler. – Barmar Jun 11 '13 at 07:45
Ahh..I forgot that.Thanks for the spot. – Suresh Atta Jun 11 '13 at 07:49

score 0 · Answer 2 · answered Jun 11 '13 at 07:38

.bind('event'...) triggers (.hover is an alias to that statement) bind only to existing elements. If you generate new elements in your code they will be unaffected.

To rectify this, use the new .on statement:

$('body').on( // No error, we bind the handler to the DOM body.
    'mouseover',
    '.like', // This is the selector that reacts to your handler.
    function(){ blagh; }
);

score 0 · Answer 3 · answered Jun 11 '13 at 07:59

Try this:

$(document).ready(function () {
    $('body').on('hover', '.like', function () {
    // or you can also use
    //$('.like').on('hover', function () {
        var id = this.id;
        values = id.split('.');
        id = values[0];
        type = values[1];
        var arrow_box_id = 'arrow_box' + '_' + id;
        document.getElementById(arrow_box_id).style.display = "";
        jQuery.ajax({
            url : 'fetch_likes_comment.php',
            type : 'POST',
            data : {
                id : id,
                type : type
            },
            beforeSend : function () {},
            complete : function () {}

        }).done(function (msg) {
            document.getElementById(arrow_box_id).innerHTML = msg;
        });
    }, function () {
        var id = this.id;
        values = id.split('.');
        id = values[0];
        type = values[1];
        var arrow_box_id = 'arrow_box' + '_' + id;
        document.getElementById(arrow_box_id).style.display = "none";
    });
});

Hi Neeraj, Thanks for the reply i tried with these two $('body').on('hover', '.like', function () { and $('.like').on('hover', function () but still i have the same issue. — K-N, Jun 11 '13 at 08:51
@Suhaskn: can you plz share your ajax output. let me see what is coming via ajax response. I am considering that in your ajax response you are getting dynamically .like class and you are trying to fire hover event on that.. — Nono, Jun 11 '13 at 09:34

A hover event I have does not work after an ajax load, it only works on initial page load

3 Answers3