mouseoverでimgのsrcを取得する方法を教えてください

###前提・実現したいこと
HTMLでWebアプリを作っているものです。(趣味です)

詳細URL
github URL = https://github.com/Minemichi/yomita
アプリURL = https://test-yomita.herokuapp.com/

動的にhtmlを書き換えると本来のjQueryのセレクタ$('#test img')などが働かないように感じます。解決方法を知っている方がいれば教えていただけませんか。

やりたいことの最終目標としては、
画像にhoverあるいはmouseoverした時にクリックせずに、その画像のsrc要素を取得したいです。どなたか詳しい方いれば、教えてください。お願いします。

###発生している問題・エラーメッセージ

###該当のソースコード

<div id="test">
</div>

<javascript>
$(window).load(function(){
$('#test').append('<img src="123">');
});

 $('#test img').mouseover(function(){
   var src = $(this).attr('src');
});
</javascript>

kei344

2017/12/15 14:24

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Hiroyadesu

2017/12/16 11:27

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

行動規範の内容に同意します

回答3件

質問者さんが実現したいことは以下のように行うことが出来ると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div id="test">
9    <img src="123.jpg">
10    <img src="345.jpg">
11</div>
12<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
13<script>
14    $('#test img').mouseover(function () {
15        var src = $(this).attr("src");
16        alert(src);
17    });
18</script>
19</body>
20</html>

(追記)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div id="test"></div>
9<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10<script>
11    $(window).on("load", function () {
12        $("#test").append(
13            "<img src=\"123.jpg\">" +
14            "<img src=\"456.jpg\">"
15        );
16    });
17
18    $("#test").on("mouseover", "img", function () {
19        var src = $(this).attr("src");
20        alert(src);
21    });
22</script>
23</body>
24</html>

投稿2017/12/15 18:32

編集2017/12/16 21:28

s8_chu

総合スコア14731

Hiroyadesu

2017/12/16 11:37

解答ありがとうございます。確かにそのやり方も試したのですが、それでもできなくて、ソースコードを更新するので、それをもう一度見てもらえますか？・やっていること(全体像) 1.ページ読み込み時に画像データを既存データベースからappendする。 2.その要素に対してmouseoverアクションで画像srcを取得する。すでに、imgタグがある状態ならs8さんの解答で実行できるのですが、ページを動的に書き換えるappend処理で要素を追加するとその要素に対して本来のjQueryの指定方法では認識されていないように感じます。。ネットを探し回ってもこれといって見つかりません。よろしければ力を借してください

s8_chu

2017/12/16 21:50

追記しました。こちら(https://app.codegrid.net/entry/practical-jquery-1#toc-2)が追記したコードを理解する助けになると思うので、一度読んでみると良いと思います。

Hiroyadesu

2017/12/16 23:57 編集

なるほど、このような書き方(on,off)があるんですか。かなり驚いてます。このURLもとても役に立ちそうなことが書いてあったので、皆に共有します。問題は無事解決しました。作った機能はherokuにdeployするので、よければ見てみてください。本当にありがとうございました。

Hiroyadesu

2017/12/17 01:02 編集

今、s8さんの方法で実装し直してみました。しっかりと動作し、コードも綺麗になりました。ありがとうございます。とても満足です。 herokuでdeployしたもの(明後日にdeployします。しばらくお待ち下さい)、あるいはgithubのbooks.jsの中に教えてもらった方法で実装された機能があります。お時間があれば見てみてください。

行動規範の内容に同意します

ベストアンサー

javascript
1$(function(){
2    $('#test').append('<img src="123">')
3        .find('img')
4        .mouseover(function(){
5            var src = $(this).attr('src');
6        });
7});

投稿2017/12/16 11:44

退会済みユーザー

総合スコア0

Hiroyadesu

2017/12/16 12:02

解答ありがとうございます。今試してみたのですが、できませんでした。今作成中ののアプリを見ていただけませんか？ https://test-yomita.herokuapp.com githubURL = https://github.com/Minemichi/yomita

Hiroyadesu

2017/12/16 12:06 編集

こんな風(上記URLアプリ)にページがリロードされることなく、html(null)とappendだけでhtmlを書き換えています。この書き換えられるimgに対してmouseoverアクションだけで、その本の情報(まずは画像src)を取得したいです。確かに、Kosukeさんのコードは動いたのですが、できれば、appen処理とmouseover処理は別の関数で実装したいです。(というかこのアプリはその方法でないと無理な気がします。。) 不躾なお願いではありますが、お時間あれば、コメント宜しくお願いします。

退会済みユーザー

2017/12/16 12:15 編集

append と mouseover の実行順位が保証されないことが原因です。append のあとでイベントを追加しないとこの場合動きません。appendにはcallback を登録できないため、やむを得ない。もしくは、はajax部分のコードに処理させるしか方法ないです。

Hiroyadesu

2017/12/17 00:01 編集

Kosukeさんのコードを真似てソースコードを改変してみます。結果を出してまたここに報告します。

Hiroyadesu

2017/12/16 23:51

解決できました。本当にありがとうございます。 Kosukeさんの真似をしたらやりたい挙動ができました。まだherokuにdeployはしてませんが、明日明後日頃にはdeployできそうです。機会があればご覧になってください。どこにKosukeさんの機能が使われたのかはすぐにわかると思います。

行動規範の内容に同意します

mouseoverはバブリングするので上のほうでとらえればいいです。
動的に書き換えても大丈夫になります。

具体的なコードについては申し訳ないですが時間がないのでここを参照してもらえますか？
https://teratail.com/questions/104712