Jquery .Hover issue with Ajax

Issue

I have this code:

cuts_html = '';
for( i = 0; i < attachments.length; i++ ) {
    fburl3 = site_url + '/haircut-detail/?img_id=' + attachments[i].ID + '&uid=' + attachments[i].post_author;
    if( isNaN(attachments[i].view_count) ) attachments[i].view_count = 0;
        
    cuts_html += '<div id="controller-image" class="cut-image">';



    cuts_html += '<div id="cut-imageplacer">';

        

                            
    cuts_html +=    '<div class="cut-image-info">' +
                        'By <a href="' + user_profile_url + 
                        '&user_id=' + attachments[i].post_author + '">' +
                        attachments[i].author_name + '</a>' +
                        '</div>';
                            
    cuts_html +=    '<div class="commentbox-1">' +
                        '<img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435546/original_views.png">&nbsp;&nbsp;' +
                        attachments[i].view_count + 
                        '&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://d2xcq4qphg1ge9.cloudfront.net/assets/17276/435545/original_talk-bubble.png">&nbsp;&nbsp;' +
                        '<fb:comments-count href="' + fburl3 + '"></fb:comments-count>' +
                        '</div></div>';

    cuts_html +=    '<a class="cut-image-a" ' +
                        'href="' + image_detail_url + 
                        '?uid=' + attachments[i].post_author + 
                        '&img_id=' + attachments[i].ID + '">' +
                        attachments[i].attachment_image_html + '</a>';

                            
    cuts_html += '</div>';
}

Div Id cut-imageplacer is display:none, so what I want is when someone hovers the controller-image div, the cut-imageplacer to show and hide of course when not on. I use this code:

<script type="text/javascript">$(document).ready(function(){    $('.cut-image').hover(
    function(){     $('#cut-imageplacer').show();
}, function () {        $('#cut-imageplacer').hide();    });  }); </script>

But it doesn’t work… Any idea what I am doing wrong? Or point me to correct direction?

Solution

It look like you are trying to attach events to elements that are being dynamically created. You need to use Live() or On() to attach events to these elements after they are created. Look at This and This to see how to use those.

like:

<script type="text/javascript">
      $(document).ready(function(){    
       $('.cut-image').live("hover",
          function(){     
              $('#cut-imageplacer').show();
          }, function () {        
              $('#cut-imageplacer').hide();    
           });  
       }); </script>

Answered By – nickmoriarty

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0