CODEWITHSUNDEEP
jquery-mobilefor-looppopup
Edgard
Edgard

Reputation: 13

jquery mobile popup not working (for loop)?

I tried to create pop ups using for-loop, but does not work. Why?

http://jsfiddle.net/edgardaraujo/Rud3G/2/

I thank you all for the help.

content html

<div data-role="page" id="page1">
    <div data-role="content">
        <div id="output"></div>
    </div>
    <!-- /content -->
</div>


content jquery

var array = new Array();

array[0] = "link-image-1";
array[1] = "link-image-2";
array[2] = "link-image-3";
var len = Object.keys(array).length;

for (i = 0; i < len; i++) {

    var popup = array[i];

    $('#output').css({'font-weight': 'bold'}).append('<a href="#' + popup + '" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%"></a>');

    var arrayPhotos = $('<div data-role="popup" id="' + popup + '" data-overlay-theme="a" data-theme="d" data-corners="false"></div>');

    arrayPhotos.append('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>   <img class="popphoto" src="' + popup + '" style="max-height:512px;" alt="photo, test">');

}

Upvotes: 1

Views: 1032

Answers (1)

Omar
Omar

Reputation: 31732

Upadate

When you create [data-role=popup] dynamically, you need to enhance its markup by using .trigger('create').

Demo

You have a mistake in href of the link to popup. You have used variable popup which holds image links instead of using the count variable i.

href="#popup' + i + '"

Here

$('#output').css({ 'font-weight': 'bold'}).append('<a href="#popup' + i + '" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%"></a>');

And

var arrayPhotos = $('<div data-role="popup" id="popup' + i +'" data-overlay-theme="a" data-theme="d" data-corners="false"></div>');

Upvotes: 3

Related Questions