Question

I have a page consisting of many elements with alphanumeric ids such as this:

<li class="entry" id="sjDDulC8wt"> 
   <img src="sjDDulC8wt.jpg" />
   <div class="entry_actions">
      <ul class="entry_actions">
          <li class='share_it'><a href='javascript:' target='_self' 
          title='Share It' class='share_it'>o</a>
          </li>
      </ul>
      <div class="share_options_container"style="display:none;">
        <ul>
          <li><a href="#" class="facebook">F</a></li>
          <li><a href="#" class="twitter">T</a></li>
          <li><a href="#" class="pinterest">X</a></li>
        </ul>
      </div>
   </div>
</li>

When I click on the anchor tag under the entry_actions list, it displays the share_options div, and when I mouse out, it disappears again according to this script:

$(".share_it a").click(function(){
   $(this).closest(".entry").find(".share_options_container").show();                
})
$(".share_options_container").mouseleave(function(){
   $(this).hide();              
})

I also have an infinite scrolling functionality that loads more of these items when the user hits the bottom of the page:

var vloaded = <?php echo $i; ?>; //number of items loaded so far
var vfilter = "<?php echo $filter; ?>"; //how I am filtering them

$(document).ready() 
{
  $(window).on('scroll', function () 
    {
      var height = $(window).height();
      var scrollTop = $(window).scrollTop();
      var dHeight = getDocHeight();

      if( height + scrollTop >= dHeight - 10) 
      {
          $.ajax
          (
            {
              type: "POST",
              url: "/organizer/getMore",
              data: { filter: vfilter, loaded: vloaded },
              dataType: "html",
              success: function( responseText, textStatus, XHR )
              {
                // select the element with the ID grid and insert the HTML
                $( "#grid" ).append( responseText );
              }
            }
          );
          // global variable
          vloaded +=30;
      } // if
    }
  ); // on
} // ready

For some reason, the show/hide works perfectly fine on the items that are initially loaded, but it does nothing when I click on the ones loaded by the ajax call. From what I can tell, the click event isn’t being triggered, but I’m not sure why.

Answer 1

Try this

$(".share_it a").live("click",function(){
   $(this).closest(".entry").find(".share_options_container").show();                
})
$(".share_options_container").live("mouseleave",function(){
   $(this).hide();              
})

You might need to make .live() calls to work.