binding - イン - cakephp カート



Fancybox、ロード後にページにロードされているアイテムにLIVE()を使用してバインドするFancyboxを取得する (4)

私はページを読み込んでロードした後、LIのリストを引っ張り出してニュースフィードを取り込む。

<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>

ユーザーがクイックビューをクリックしても何の幸運も覚えていないときに、私はファンシーボックスを起動しようとしています。 何か案は?

$(document).ready(function() {
    $('.quickview').fancybox();
});

また試みた:

$(document).ready(function() {
   $('a.quickview').live('click', function() {
        $(this).fancybox();
    });
});

http://fancybox.net/

すべてのアイデアありがとう...


Answer #1

Fancyboxについての私の理解から、 fancybox()呼び出すと、プラグインが選択された要素に簡単に付加されます。 clickイベントでfancyboxを呼び出すと何も表示されません。

私はあなたが追加する必要があると思う

$(li_element_that_you_create).fancybox();

あなたのリストに新しいLI要素を作成するコードに

EDIT

loadを使用しているload 、次のような処理を行います。

$('#ul_id_goes_here').load('source/of/news.feed', function() {
  $('.quickview').fancybox();
});

Answer #2

.onが推奨されている.liveデリゲートされたイベントに関するドキュメントを読んだ後に、私が思いついた解決策があります(あなたの要素が 'trigger-modal'のクラスを持っていると仮定します)。

$(document).on('click', '.trigger-modal', function() {
  // remove the class to ensure this will only run once
  $(this).removeClass('trigger-modal');
  // now attach fancybox and click to open it
  $(this).fancybox().click();
  // prevent default action
  return false;
});

Answer #3

古い質問ですが、今後の検索ユーザーには役立つかもしれません。

私の好みの解決方法は、ライブイベント内から手動でfancyboxを起動することです。

$('.lightbox').live('click', function() {
    $this = $(this);
    $.fancybox({
        height: '100%',
        href: $this.attr('href'),
        type: 'iframe',
        width: '100%'
    });
    return false;
});

編集:jQuery 1.7からlive()は廃止され、on()を代わりに使用する必要があります。 詳細はhttp://api.jquery.com/live/を参照してhttp://api.jquery.com/live/


Answer #4

問題は、fancyboxをAJAXのロードされた要素に取り付けることです。

私も同じ問題があり、私はこの解決策を見つけました。

私はここにそれを貼り付けてコピーします。詳細はオリジナルのバグレポートをご覧ください:

$.fn.fancybox = function(options) {

$(this)
  .die('click.fb')
  .live('click.fb', function(e) {       
    $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
    e.preventDefault();
    [...]

クレジットはjeff.gran送られjeff.gran