动态创建的弹出窗口无法与 jQuery 绑定答案

【问题标题】：Popup dynamically created can't bind with jQuery动态创建的弹出窗口无法与 jQuery 绑定
【发布时间】：2017-05-31 17:51:47
【问题描述】：

我有一个简单的图片搜索页面查询 Flikr API 并显示 4 个结果作为弹出模式的链接。我的 JS 代码将相关的 img src 插入到正确的 div 和数据属性中，以创建模式/弹出框。我知道渲染的代码是正确的，因为我可以将渲染代码的输出从 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>

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

但我无法让它显示并作为弹出窗口工作。它显示带有无法打开的链接的图像。

【问题讨论】：

不添加弹窗，只使用一个静态弹窗作为容器并动态设置img源：$('#photo img').attr('src', 'http://farm5.staticflickr.com/...');
但是我的链接将如何对应 saiD 弹出窗口？我应该把ID和img标签放在一起吗？
我刚刚添加了一个如何动态链接图像 src 的示例。
由于这些元素是动态创建的，您必须使用事件委托将事件附加到它们

标签： javascript jquery jquery-mobile

【解决方案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>

在我的示例中，我使用了页面外的弹出窗口，因此您可以从任何地方打开它，甚至不需要在 ajax 调用中创建它。该链接是使用自定义数据属性设置的。

【讨论】：