JQuery 要素リサイズ時のidが取得できない

Question

お世話になっております。
下記のように要素に追加したimgで
dblclick時はきちんとidが取得できるのですが、
resizable時のidが取得できません。

何か考えられることはありますでしょうか？

$('<div class="bg">')
  .resizable({
    containment: 'parent',
    stop: function (event, ui) {
    alert(event.target.id.toString());
   }
  }).draggable({
     containment: 'parent',
     scroll: false
  }).dblclick(function (event) {
     alert(event.target.id.toString());
}).append(img).appendTo('#screen');

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScript）を提示されたほうが回答を得やすいと思います。また、resizableというメソッドは jQuery に標準ではありません。使用しているライブラリも提示されたほうが良いと思います。

Answer 1

img変数の中身が提示されていませんが、名前からして恐らくimg要素が入っていて、そちらにはidが付けられているのではないかと思われます。

event.targetはイベントが発生した最深の要素を指します。ダブルクリックについてはimgをダブルクリックしているのでしょうから、event.targetはimgとなり、そのidが表示されています。

ですから、同じダブルクリックであっても、.bgの内部であり、かつimgではない箇所をダブルクリックすると、今度はevent.targetが.bgとなります。.bgはidを与えられていないので、この場合は何も表示されないでしょう。

---

それから、resizableについては操作の性質上、imgではなく.bgの枠線をドラッグして行います。

ですから、resizableのほうのevent.targetはいつも.bgです。.bgはidを持っていませんので、こちらでidを表示させようとしても失敗しているのだと思います。

---

いずれの場合であってもimgのidを表示させたいのであれば、

alert($(event.currentTarget).find('img').attr('id'));

このようにcurrentTargetを基準にしたほうが良いと思います。currentTargetは発生源が自身であっても内部の別な要素であっても、イベントハンドラの仕掛け先である.bgになりますので。

Comments

[sii_side]

https://jsfiddle.net/sii_side/09hqghm0/

手元で遊んでいたときのfiddleです。

[Qoo]

ありがとうございます！
とても勉強になりました！

Answer 2

多重回答になってしまうんでしょうか。
以前の分は削除依頼提出済みです。

改めて少し動かしてみたのですが要素のセレクタを変えたら恐らくご希望通りの動きになると思います。

$('<div class="bg">')
↓
$('.bg')

たびたびすみません。

Comments

[Qoo]

回答ありがとうございます。$('.bg')に変更してみたのですが、画像自体が追加されなくなってしまいました。。。何かわかりますでしょうか。。