jQueryのカラーボックスのプラグインは、動的に作成された要素に追加します

StackOverflow https://stackoverflow.com/questions/2443490

  •  19-09-2019
  •  | 
  •  

質問

リンクにカラーボックスの機能を割り当てることが通常の方法は、このようなものです。

$("a.colorbox").colorbox({ transition: "elastic" });

新しく追加された項目は、しかし、このようにバインドされていません。

をどのように動的に作成するためにカラーボックスを追加することができます。の

<a class="colorbox"></a>
の要素すぎ？の

タグ
役に立ちましたか？

解決

方法について説明しますここで（この例ではclickのように）あなたが興味を持っている要素の.colorboxイベントにバインドを生き、ハンドラでカラーボックスライブラリ関数を呼び出すことのです。

$('.colorbox').live('click', function() {
  $.colorbox({href:$(this).attr('href'), open:true});
  return false;
});

他のヒント

また、これを試すことができます：

$('.colorbox').live('click',function(e){
    e.preventDefault();
    $(this).colorbox({open:true});
});

私はそれが、その後fnコマンドを使用して少しきれいだと思います。

に住むように減価償却され、あなたはの

にを使用する必要があります 
$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});

このコードは、グループ化できます。

この記事は古いですが、これは他の人を助けることがあります。 simonthetwitソリューションはOKですが、二回トリガリンクをクリックする必要があります。カラーボックスを直接呼び出すことができますので、この作業をする必要があります：

$( '.colorbox' ).live('click',function(e){
        e.preventDefault();
        $.colorbox({open:true});
        //inline example
        //$.colorbox({inline:true, width:"50%", href:"#inline_content"});
});

乾杯！

ここでは、私がイベントを発生するために二回のリンクをクリックするの必要を回避することが分かっソリューションだっます：

$(document.body).delegate('.<my-class>', 'click', function(e) {  
    e.preventDefault();  
    $('.<my-class>').colorbox({<my-code>})  
});

私は二回トリガリンクをクリックすることで@sunburstと同じ問題を抱えていました。同じコードを使用し、代わりに.delegate()の.live()。すべてを解決し、うまく私のjQueryをクリーンアップ！

ここで

ニース説明：のhttp：/ /www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/する

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top