Question

我有一个页面，其中包含许多带有字母数字ID的元素，例如：

<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>

当我点击entry_actions列表下的锚标记时，它会显示share_options div，当我鼠标移出时，它会根据此脚本再次消失：

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

我还有一个无限滚动功能，可以在用户点击页面底部时加载更多这些项目：

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

出于某种原因，show / hide对最初加载的项目完全正常，但是当我点击ajax调用加载的项目时它什么也没做。据我所知，点击事件没有被触发，但我不确定原因。

Answer 1

试试这个

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

您可能需要拨打.live()电话。

Answer 2

click和mouseleave函数仅绑定到调用函数时DOM中存在的元素。如果通过ajax加载更多元素，那么它们不会自动将事件绑定到它们。您可以使用“live”或“delegate”来执行此操作。我更喜欢代表。

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

脚本仅适用于在Ajax之前加载的元素

2 个答案: