Javascript 动态创建的弹出窗口可以'；不能与jQuery绑定

我有一个简单的图像搜索页面，查询FlikrAPI，并显示4个结果作为弹出模式的链接。我的JS代码将相关的img src插入到正确的div和data属性中，以创建模态/弹出框。我知道渲染代码是正确的，因为我可以将渲染代码的输出从DOM复制/粘贴到另一个html文件中并打开它，它可以正常工作

我试图找到一种绑定数据属性的方法，以便jQuery知道这些动态创建的元素是弹出窗口

加载HTML

<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>

输入搜索标签

JS

$（'submit_tag'）。在（“单击”，函数（）上）{
//获取搜索框和复选框的值
var tag=document.getElementById（“搜索”）.value；
//$（“#图像”）.empty（）；
log（“启动api”）；
searchAPI（tag）；
console.log（'api finished'）；
函数searchAPI（标记）{
var flickerAPI=”http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON（flickeAPI{
标签：标签，
tagmode:“任何”，
格式：“json”
})
.完成（功能（数据）{
$.each（data.items，function（i，item）{
$( "");
log（'image'+i+'包装在弹出窗口'+i+''）中）；
$( "

---

但我无法将其显示为弹出窗口。它显示的图像带有无法打开的链接。

您可以只使用一个静态弹出窗口并动态链接图像src：

var照片=[
"http://placehold.it/150/7496a",
"http://placehold.it/150/99ba7f",
"http://placehold.it/150/8985dc"
];
函数listPhotos（）{
$（“#图像”）.empty（）；
$。每个（照片、功能（i、项目）{
$("

不要添加弹出窗口，只需使用一个静态弹出窗口作为容器，并动态设置img源：

$（“#photo img”）.attr（'src'，'http://farm5.staticflickr.com/...')

但是我的链接将如何对应于所述弹出窗口？我是否应该将ID与img标记一起放入？我刚刚添加了一个如何动态链接图像src的示例。由于这些元素是动态创建的，因此您必须使用事件委派将事件附加到它们

  $('#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>