動的に作成されたポップアップはjQueryとバインドできません

Flikr APIを照会し、ポップアップモーダルへのリンクとして4つの結果を表示する簡単な画像検索ページがあります。私のJSコードは、関連するimg srcを、モーダル/ポップアップボックスを作成するための正しいdivおよびdata属性に挿入します。レンダリングされたコードが正しいかどうかは、DOMからレンダリングされたコードの出力を別のhtmlファイルにコピー/ペーストして開くことができ、それを開くことができます。動的に作成されたポップアップはjQueryとバインドできません

私はデータ属性をバインドする方法を工夫して、jQueryがこれらの動的に作成された要素がポップアップであることを知っているようにしています。負荷

<form action="#" method="post"> 
    <label for="search">Enter Search Tag</label> 
    <input type="text" id="search" name="search_tag"/> 
    <input type="button" id="submit_tag" value="Submit"/> 
</form> 


<div id="images"> 
    <div id="thePopups"> 
    </div> 
</div>

上

HTML JS

$('#submit_tag').on("click ",function(){ 

// grabs the values of the search box and checkbox 
var tag = document.getElementById("search").value; 
// $('#images').empty(); 

console.log('start api'); 

searchAPI(tag); 

console.log('api finished'); 

function searchAPI(tag){ 

    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 

    $.getJSON(flickerAPI, { 
    tags: tag, 
    tagmode: "any", 
    format: "json" 
    }) 
    .done(function(data) { 
    $.each(data.items, function(i, item) { 


     $("<img>").attr("src", item.media.m).appendTo("#thePopups"); 
     console.log('img'+i+' created'); 

     $("img:eq("+i+")").wrap("<div data-role='popup' id='photo"+i+"'></div>"); 
     console.log('image '+i+' wrapped in popup '+i+''); 

     $("<a>").attr({ 
     'data-rel':'popup', 
     href: "#photo"+i 
     }).text(" Open Modal "+i) 
     .appendTo("#images"); 
     console.log('modal'+i+' created'); 

     if (i === 3) { 
     return false; 
     } 

    }); 


    }); 




} 
})

が動的に生成し、これを挿入します。

<div id="images"> 
<div id="thePopups"> 
<div data-role="popup" id="photo0"><img src="http://farm5.staticflickr.com/....../.jpg"></div> 
<div data-role="popup" id="photo1"><img src="http://farm5.staticflickr.com/....../.jpg"></div> 
<div data-role="popup" id="photo2"><img src="http://farm5.staticflickr.com/....../.jpg"></div> 
<div data-role="popup" id="photo3"><img src="http://farm5.staticflickr.com/....../.jpg"></div> 
</div> 
<a data-rel="popup" href="#photo0">Open Modal 0</a> 
<a data-rel="popup" href="#photo1">Open Modal 1</a> 
<a data-rel="popup" href="#photo2">Open Modal 2</a> 
<a data-rel="popup" href="#photo3">Open Modal 3</a> 
</div>

しかし、私はそれを表示してポップアップとして動作させることはできません。開くことができないリンクが表示されています。

出典

2017-05-31 nford8

ポップアップを追加しないで、静的ポップアップをコンテナとして使用し、imgソースを動的に設定してください： '$（ 'photo img'）。attr（ 'src'、 'http://farm5.staticflickr.com/ ... '）; ' – deblocker

しかし私のリンクはsaiDポップアップにどのように対応しますか？私はimgタグでIDを入れなければならないのですか？ – nford8

イメージsrcをダイナミックにリンクする方法の例を追加しました。 – deblocker

あなたはただ1静的ポップアップを使用して動的に画像srcをリンクすることができます：あなたはどこからでもそれを開くことができますので、私の例では

var photos = [ 
 
    "http://placehold.it/150/7496a", 
 
    "http://placehold.it/150/99ba7f", 
 
    "http://placehold.it/150/8985dc" 
 
]; 
 

 
function listPhotos() { 
 
    $("#images").empty(); 
 
    $.each(photos, function(i, item) { 
 
    $("<a>").attr({ 
 
     "data-src": item, 
 
     href: "javascript:void(0);" 
 
     }).addClass("ui-btn ui-corner-all").text(" Open Modal " + i) 
 
     .appendTo("#images"); 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#popup").enhanceWithin().popup(); 
 
    $("#photo").on("load", function() { 
 
    $.mobile.loading("hide"); 
 
    $("#popup").popup("open", { 
 
     "positionTo": "window" 
 
    }); 
 
    }); 
 
}); 
 

 
$(document).on("pagecreate", "#page-1", function(event) { 
 
    $("#images").on("click", "a[data-src]", function() { 
 
    $.mobile.loading("show"); 
 
    $("#photo").attr({"src": $(this).data("src")}); 
 
    }); 
 
});

.ui-popup { 
 
    padding: 1em; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 
<body> 
 
    <div id="page-1" data-role="page"> 
 
    <div role="main" class="ui-content"> 
 
     <a class="ui-btn ui-corner-all" href="javascript:void(0);" onclick="listPhotos();">Get my Photos</a> 
 
     <div id="images"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="popup" data-theme="a"> 
 
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a> 
 
    <img id="photo" src=""> 
 
    </div> 
 
</body> 
 
</html>

iは、ページ外のポップアップを使用し、あなたはajax呼び出しの中にそれを作成する必要はありません。リンクは、カスタムデータ属性を使用して設定されます。

出典

2017-06-01 22:05:48 deblocker

動的に作成されたポップアップはjQueryとバインドできません

答えて

関連する問題