Question

我有一个简单的图像搜索页面查询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>

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>

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

Answer 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调用中创建它。使用自定义数据属性设置链接。

动态创建的弹出窗口不能与jQuery绑定

1 个答案: