2016-12-23 6 views
0

フォトプレティライブラリプラグインを使用しているサイトで作業しています。画像をクリックすると、画像をポップアップ表示するテンプレートコードが追加され、閉じるときに完全に削除されます。しかし、私はprettypphoto efectテンプレートポップアップにその特定の画像の要素を追加する必要があります。私は別のスクリプトmain.jsでjqueryを使ってテンプレート内の名前を選択していますが、動作しません。prettyphotoエフェクトのJqueryセレクター

イメージをクリックすると、テンプレートコードが私の側に追加され始めます。そのため、クリックするとその要素を選択します。それは理にかなっていますか?私が間違っている場合は私を修正してください。私はプラグインファイルを変更できません。

main.js 
jQuery(document).ready(function() { 
    jQuery('.contact_plan img').click(function(){ 
     var element = jQuery('.element'); 
     jQuery('.element').detach(); 
     jQuery('.pp_content_container').append(element); 
    }); 

}); 


The prettyphoto template look like this 
<div class="pp_pic_holder pp_default"> 
<div class="pp_top">...</div> 
<div class="pp_content_container">..</div> 
.... 
+0

フィドルを入れてもいいですか? – mrid

答えて

0

あなたは要素がexistanceに来るときチェックに使用できる機能です。

;(function ($, window) { 

var intervals = {}; 
var removeListener = function(selector) { 

if (intervals[selector]) { 

    window.clearInterval(intervals[selector]); 
    intervals[selector] = null; 
} 
}; 
var found = 'waitUntilExists.found'; 


$.fn.waitUntilExists = function(handler, shouldRunHandlerOnce, isChild) { 

    var selector = this.selector; 
    var $this = $(selector); 
    var $elements = $this.not(function() { return $(this).data(found); }); 

    if (handler === 'remove') { 

     // Hijack and remove interval immediately if the code requests 
     removeListener(selector); 
    } 
    else { 

     // Run the handler on all found elements and mark as found 
     $elements.each(handler).data(found, true); 

     if (shouldRunHandlerOnce && $this.length) { 

      // Element was found, implying the handler already ran for all 
      // matched elements 
      removeListener(selector); 
     } 
     else if (!isChild) { 

      // If this is a recurring search or if the target has not yet been 
      // found, create an interval to continue searching for the target 
      intervals[selector] = window.setInterval(function() { 

       $this.waitUntilExists(handler, shouldRunHandlerOnce, true); 
      }, 500); 
    } 
} 

return $this; 
}; 

}(jQuery, window)); 

あなたはこのようにそれを使用することができます:あなたのケースでは

$(selector).waitUntilExists(function); 

、あなたが試すことができます。

jQuery('.contact_plan img').click(function(){ 
    var element = jQuery('.element'); 
    jQuery('.element').detach(); 
    $('.pp_content_container').waitUntilExists(function(){ 
     jQuery('.pp_content_container').append(element); 
    }); 
}); 
0

あなたは

jQuery('.pp_content_container').append(element); 
}); 

appendを使うべきではありませんが、あなたが取り組んでいるオブジェクトにパラメータを追加します。

appendToは、作業中のオブジェクトをパラメータに追加します。

あなたがやっていることは、ページのどこにでも追加されていない新しい要素に$('.pp_content_container')要素を追加することです。ここで

+0

こんにちは、私は正しく使用するためにthanaks、私は追加を使用しますが、問題は、私のjQueryのセレクタは、 "jpeg"(例えば、 "pp_content_container")を設定する ".pp_content_container" ");また動作しません – Yoona

+0

あなたがそれを選択しているときにdivが作成されていることを確かめていますか? – mrid

+0

こんにちは、script.jsで選択したときに作成されていない可能性があります。セレクタが作成後にのみ実行されるようにする方法はありますか? – Yoona