动态创建的弹出窗口无法与jQuery绑定 [英] Popup dynamically created can't bind with jQuery
问题描述
我有一个简单的图像搜索页面，该页面查询Flikr API并显示4个结果作为指向弹出模式的链接.我的JS代码将相关的img src插入到正确的div和数据属性中，以创建模式/弹出框.我知道渲染的代码是正确的，因为我可以将渲染的代码的输出从DOM复制/粘贴到另一个html文件中并打开它，它可以正常工作.
I have a simple image search page querying the Flikr API and displaying 4 results as links to popup modals. My JS code inserts the relevant img src into the correct div's and data attributes for creating modal/popup boxes. I know that the rendered code is correct as I can copy/paste the output of the rendered code from DOM into another html file and open it, it works as it should.
我正在尝试一种绑定数据属性的方法，以便jQuery知道这些动态创建的元素是弹出窗口.
I'm trying to work out a way of binding the data attributes so that jQuery knows that these dynamically created elements are popups.
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>
但是我无法让它显示并作为弹出窗口工作.它显示的图像带有无法打开的链接.
But I can't get it to display and work as a popup. It's showing the images with the links which can't be opened.
推荐答案
您只能使用一个静态弹出窗口并动态链接图像src:
You can use just one static popup and link the image src dynamically:
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调用中创建它.链接是使用自定义数据属性设置的.
In my example i used a popup outside pages, so you can open it from everywhere, and you don't even need to create it inside the ajax call. The link is set by using a custom data-attribute.
这篇关于动态创建的弹出窗口无法与jQuery绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
