動的HTMLのclassに対してクリックイベントを記述しても動作しない
Q&A
Closed
APIで取り込んだ商品画像をクリックすると、
その画像のsrc属性を見て、同じsrc属性を#item1に入れる
クリックイベントを記述したのですが、静的な画像だとうまくいくものの
APIで表示した動的HTMLだとクリックイベントが動作しません。
どのように記述すれば反映することができますでしょうか？
■コード全体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div>アイテムリスト内に表示する画像（動的HTMLで生成）をクリックするとここに同じ画像（src）を表示</div>
<img src="./img/default.jpg" id="item1" style="width:50px" class="item" alt="">
<div>アイテムリスト</div>
<!-- APIで動的に表示した画像は追加できない -->
<div class="cssgrid"></div>
<!-- この画像を<div class="cssgrid">の中にいれてクリックする場合は追加できる -->
<div><img src="./img/00001.jpeg" class="img" alt=""></div>
<script>
// ------------------
// グローバル変数
// ------------------
let APPID = "------アプリID------"; //アプリID *必須
let AFF = "------アフィリエイトID------";
let HITS = 30; //1ページ当たりの表示件数
let KEYWORD = encodeURIComponent("カラコン"); //絞り込みしたい単語
// ------------------
// 楽天API
// ------------------
$(function () {
function put_item(item) {
//ループで表示したいHTML部分を作成
let h = '<div>'
+ '<img src="'
+ item.mediumImageUrls[0].imageUrl.replace("?_ex=128x128","")
+ '" class="img">'
+ '<span><a href="'
+ item.affiliateUrl
+ '" target="_blank">商品リンク</a></span></div>';
$(".cssgrid").append(h);
}
//ajax
function search_rakuten(page) {
$.ajax({
url:
"https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&applicationId=" +
APPID +
"&affiliateId=" +
AFF +
"&keyword=" +
KEYWORD +
"&page=" +
page +
"&hits=" +
HITS,
type: "get",
dataType: "json",
timeout: 10000,
async: "true",
})
//読み込み成功時の処理
.done(function (data) {
// 1商品ずつhtml置く
for (let i in data.Items) {
put_item(data.Items[i].Item);
}
})
//読み込み失敗時の処理
.fail(function (data) {
console.log("読み込みエラー");
});
}
search_rakuten(1);
});
//商品画像をクリックするとid="item1"のsrcを書き換える
$(window).on('load',function(){
$('.img').on('click', function(){
let img_id = $(this).attr('src');
let item1 = $('#item1').attr('src');
if(item1 ==="./img/default.jpg"){
$('#item1').attr('src', img_id);
}
});
});
</script>
</body>
</html>
0