2012-04-02 8 views
2

これは非常に簡単かもしれませんが、何が起こっているのかを突き止めるのに苦労しています。 JSフィドルでJqueryのクリックイベント - 発射に2回のクリックが必要

http://jsfiddle.net/3hHAX/

'オープンビデオモーダル' に二つのリンク出力があります。

リンクテキストに示すように、これらの2つのリンクには、モデルのポップアップが表示され、YouTubeの動画が含まれている必要があります。クリックイベントが最初のクリックでトリガされませんいくつかの理由についてhttp://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

これはからprettyphotoライブラリを使用しています。 しかし、2番目の作品です。

(CSSは含まれていないため、非常にモーダルではありませんが、少なくともデモの目的では下にコンテンツの負荷が表示されます)。

誰かが間違っていると示唆できますか?

おかげで、

スティーブ

答えて

1

おかげでみんなを、

両方の応答は私が最終的にそれを解決する助けました。更新JSFiddleで

エンド・ソリューション:

http://jsfiddle.net/3hHAX/6/

prettyPhotoが、それはクリックイベントに自身だアタッチし、そしてちょうどそれらのDOM要素に適用する必要らしいです。

おかげで、 スティーブは

4

トリガあなたがそれを初期化し、唯一それが一度初期化することができるようにした後、クリックイベント。

(function($) {  
    $(".watch-this a, .field-name-field-embed-code a").live('click',function(){ 
     if (!$(this).is(".pPhoto")) { 
      $(this).prettyPhoto({ 
       social_tools: '' 
      }).addClass("pPhoto").click();  
     } 
     return false;  
    }); 
})(jQuery); 

デモ:http://jsfiddle.net/3hHAX/3/

明確化のための編集:
これは、動的要素のプラグインを初期化するのは非常に一般的な方法です。前述したように、要素が動的でない場合は、DOM準備時に初期化する方が良いです。

注:
.liveが償却され、あなたが本当に今まで、DOMが本当に出ている場合を除きjqueryのライブメソッドを使用することはありません、まず.on

(function($) {  
    $(document).on("click",".watch-this a, .field-name-field-embed-code a",function(){ 
     if (!$(this).is(".pPhoto")) { 
      $(this).prettyPhoto({ 
       social_tools: '' 
      }).addClass("pPhoto").click();  
     } 
     return false;  
    }); 
})(jQuery); 
0
  • を使用する必要がありますあなたのコントロールの。少なくとも、ライブ関数は多くの減速と多くの問題を引き起こすため、デリゲート関数を使用する必要があります(今度は間違っていませんでしたが)
  • 第2に、クリックイベントは可能な限り起動しますhereを参照してください。しかし、prettyPhotosコンポーネントは私にはわからない理由で初めて動作しませんでしたが、以前のjsfiddleリンクで見るようにが初めてラウンドしたときに警告を発するので、私はprettyphotosスクリプトのバグとして(Kevin Bは、2回目のクリックイベントを引き起こして慌てて解決するようです)。
+0

「.onは」ではなく「.live」の使用と要素が動的にロードされているならば、あなたのコントロールの外にあってはなりません「.on」、 『DOM』を使用しています。あなたはこの声明が何を意味しているか分かりません。 –

関連する問題