J’ai une simple page de recherche d’images qui interroge l’API Flikr et affiche 4 résultats sous forme de liens vers des modaux contextuels. Mon code JS insère l’img src appropriée dans les atsortingbuts de données et div appropriés pour la création de boîtes modales / contextuelles. Je sais que le code rendu est correct car je peux copier / coller la sortie du code rendu de DOM dans un autre fichier html et l’ouvrir, cela fonctionne comme il se doit.
J’essaie de trouver un moyen de lier les atsortingbuts de données afin que jQuery sache que ces éléments créés dynamicment sont des fenêtres contextuelles.
HTML en charge
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 ) { $( "" ).attr( "src", item.media.m ).appendTo( "#thePopups" ); console.log('img'+i+' created'); $( "img:eq("+i+")").wrap( ""); console.log('image '+i+' wrapped in popup '+i+''); $( "" ).attr({ 'data-rel':'popup', href: "#photo"+i }).text( " Open Modal "+i ) .appendTo( "#images"); console.log('modal'+i+' created'); if ( i === 3 ) { return false; } }); }); } })
Génère et insère dynamicment ceci.
Mais je ne peux pas l’obtenir pour afficher et travailler comme un popup. Il montre les images avec les liens qui ne peuvent pas être ouverts.
Vous pouvez utiliser un seul popup statique et lier dynamicment l’image 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) { $("").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; }