0

我有一个包含许多带有字母数字 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

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

4

2 回答 2

2

试试这个

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

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

于 2012-06-28T23:56:09.453 回答
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();              
})
于 2012-06-29T00:00:31.527 回答