質問: お世話になっております。 下記のように要素に追加したimgで dblclick時はきちんとidが取得できるのですが、 resizable時のidが取得できません。 何か考えられることはありますでしょうか? ``` $('') .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'); ```
回答: 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になりますので。