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 を介してさらに多くの要素をロードすると、それらの要素にイベントが自動的にバインドされることはありません。これを行うには、「ライブ」または「デリゲート」のいずれかを使用できます。私はデリゲートの方が好きです。

$("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 に答える