jquery.pep.jsで生成した要素にonでフォーカスをあてたい

Question

jquery.pep.js公式サイト
jquery.pep.jsのappendにて生成した要素に関数を充てたいと思っています。

$(function(){
	$("#btn1").click(function(){
		$("div#parent").append('<div id="test" class="pep peppable"><img src="img/1.png" alt="1の画像" height="35" style="position: absolute; z-index: 3;"></div>');
	});

これによって生成されたdiv内のpngを動かしたく、まずは位置情報をコンソールに表示。

$(function(){
    $('.pep pable').pep({
		drag: function(ev, obj){
                console.log(ev);
                console.log(obj.activeDropRegions);
            },
    });
});

と思ったのですが、生成された要素はフォーカスが当たらないようです。はじめからある要素は、いわゆるonload時に読み込まれているようでコンソール出力はできます。
そこで、つまりは下のようなことだろうと推測し、

$(#test).on("click",".peppable",function(){
	alert("あああああ");
});

とすると生成された要素をクリックで反応がありました。イメージとしてはonでマウントさせる感じ？
しかしこれをドラッグ時に位置情報をコンソールに、という記述にできません。どのようにするか教えていただけるとありがたいです。
最終的には、

$(function(){
    $('.peppable').pep({
        droppable: '#gomi',
        overlapFunction: false,
        useCSSTranslation: false,
		drag: function(ev, obj){
                console.log(ev);
                console.log(obj.activeDropRegions);
            },

        //マウス離した時
        stop: function(ev, obj){
            if(obj.activeDropRegions.length > 0){
                $(ev.target).remove();
            }
        }
    });
});

のようにgomiというIDにドロップして削除しようと思っています。いろいろと試していてIDとクラスが点在し読みにくいと思います。申し訳ない。
よろしくお願いします。

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

Answer 1

appendの次の行にに $('.pep.pable').pep({/*中身省略*/}); を入れれば動くと思います。多重に設定してしまう可能性があるので、その場合 設定した要素を省いて取得するなどすればよいと思います。

Comments

[kihokutarou]

ご回答ありがとうございます。
$(function(){
$("#btn1").click(function(){
$("div#parent").append('<div id="test" class="pep peppable"><img src="img/1.png" alt="1のブロック" height="35" style="position: absolute; z-index: 3;"></div>');
$('.pep pable').pep({
drag: function(ev, obj){
console.log(ev);
console.log(obj.activeDropRegions);
},

});
});

まず、生成したと同時にコンソールログを出す記述なのかと思い上記を試しましたが動きませんでした。
次に、生成した後に存在自体を認識させるのかと思い以下を試しましたが動きませんでした。

$(function(){
$("#btn1").click(function(){
$("div#parent").append('<div id="test" class="pep peppable"><img src="img/1.png" alt="1のブロック" height="35" style="position: absolute; z-index: 3;"></div>');
$('.peppable').pep({ constrainToParent: true , debug: false});
});

何か私が勘違いしていたり見落としがあれば教えてください。

[kei344]

× $('.pep pable')
○ $('.pep.pable')

[kihokutarou]

ご回答ありがとうございます。
上述、下述ともに $('.pep.pable')としましたが変化がありませんでした。

[kei344]

https://jsfiddle.net/x5r6w4fs/
動きますよ。クラス名がちょっと違いましたね、すみません。

[kihokutarou]

ありがとうございます。期待通りの動きでした。
もしよければ少し教えてください。なかなか参考サイトがなくて・・・。
append時に生成後の処理も同時に記述しておけばよいということはわかりました。そのうえで、ご指摘の
$('.pep.peppable').pep({　以下略
の
'.pep.peppable'
の意味が分かりません。「pepを適用する要素の中のpeppableというクラスを指定」という認識でよいのでしょうか。

[kei344]

＞ '.pep.peppable'
pep と peppable がclassに設定された要素を指定するCSSセレクタです。

【CSS 複数のセレクタを指定する/絞り込むサンプル |】
https://itsakura.com/css-multi-selector

[kihokutarou]

ありがとうございました。