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

【问题标题】：Script only applies to elements loaded before Ajax脚本仅适用于在 Ajax 之前加载的元素
【发布时间】：2012-06-28 23:52:53
【问题描述】：

我有一个由许多带有字母数字 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列表下的anchor标签时，它会显示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

由于某种原因，显示/隐藏在最初加载的项目上工作得非常好，但是当我单击由 ajax 调用加载的项目时，它什么也不做。据我所知，click 事件没有被触发，但我不确定为什么。

【问题讨论】：

标签： jquery ajax show-hide

【解决方案1】：

试试这个

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

您可能需要拨打.live() 才能工作。

【讨论】：

哇，这太容易了。谢谢！

【解决方案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();              
})

【讨论】：