0

こんにちは、jqueryクイックサンドプラグインを使用してポートフォリオ Web サイトを作成しています。各画像で、jQuery を使用してホバー効果を作成しようとしています。効果は最初は機能しますが、クイックサンド プラグインに添付されているボタンをクリックすると、ホバー効果が機能しなくなりました。新しい要素を作成して DOM に挿入する前に、クリック ハンドラが関連付けられないことに気付きました。

どうすればこの問題を解決できますか?

これは、流砂ブルージンとホバー効果の両方のコードです。

 $(document).ready(function() {

  var $filterType = $('#filterOptions li.active a').attr('class');
  var $holder = $('ul.ourHolder')
  var $data = $holder.clone();

  $('#filterOptions li a').click(function(e) {
    $('#filterOptions li').removeClass('active');

    var $filterType = $(this).attr('class');
    $(this).parent().addClass('active');
    if ($filterType == 'all') {
      var $filteredData = $data.find('li');
    }
    else {
      var $filteredData = $data.find('li[data-type=' + $filterType + ']');
    } 
    $holder.quicksand($filteredData, {
      duration: 800,
      easing: 'easeInOutQuad'
    });
    return false;
  });

   //hover effect
    var portfolio =  $("ul.ourHolder li");
    portfolio.on('mouseover', function(){
        $(this).children('div.full').stop().fadeTo('slow',0.5);     
    }) 
    portfolio.on('mouseout' , function(){
        $(this).children('div.full').stop().fadeOut();
    })
});
4

2 に答える 2

7

この特定の使用方法で.on()は、イベント ハンドラーをコードの実行時に存在していた要素にのみバインドし、そのコードの実行後に動的に追加される要素には影響しません。.on()代わりに、次のようなイベント委譲構文を使用する必要があります。

$(document).on('mouseover', 'ul.ourHolder li', function(){
    $(this).children('div.full').stop().fadeTo('slow',0.5);     
})

理想的には、イベントdocumentをトリガーするときにコールバック関数を実行するすべての要素を含む、より具体的ではあるが動的に追加されない要素のセレクターに置き換えます。mouseover

于 2012-07-09T13:27:16.950 に答える
3

li 要素は DOM に動的に追加されるため、代替バージョンの を使用しonて hover イベントをデリゲートします。

これを試して：

//hover effect
var portfolio =  $("ul.ourHolder li");
$("ul.ourHolder").on("mouseover", "li", function(){
        $(this).children('div.full').stop().fadeTo('slow',0.5);     
});

$("ul.ourHolder").on("mouseout", "li", function(){
        $(this).children('div.full').stop().fadeOut();
});
于 2012-07-09T13:27:18.733 に答える