質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2985閲覧

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

Hiroyadesu

総合スコア14

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/12/15 12:17

編集2017/12/16 12:12

###前提・実現したいこと
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/12/15 14:24

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

2017/12/16 11:27

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

回答3

0

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

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の指定方法では認識されていないように感じます。。ネットを探し回ってもこれといって見つかりません。 よろしければ力を借してください
Hiroyadesu

2017/12/16 23:57 編集

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

2017/12/17 01:02 編集

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

0

ベストアンサー

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: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さんの機能が使われたのかはすぐにわかると思います。
guest

0

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

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

投稿2017/12/16 12:31

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hiroyadesu

2017/12/16 23:55

ありがとうございます。 問題は無事に解決しました。 上記のURLも拝見して、他にいいアイデアが浮かんだので今後実装します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問