Как добавить динамические данные во всплывающее окно в jQuery mobile?

Question

Я использовал popup() в JQuery мобильного

$("#id").popup(); 

Я хочу добавить некоторые данные к этому элементу «ид», когда всплывающее окно открыто .. Как?

Answer 1

$('#id').attr('data-some', 'some').popup(); 

или

$('#id').data('some', 'some').popup(); 

О data()

Answer 2

Добавьте это в JavaScript:

$("#id").on('popupafteropen', function(){ 
    // do whatever here 
    $(this).append("Add some HTML!"); 
    $(this).html("Or replace the HTML contents."); 
}); 

Смотреть события всплывающей плагина: http://jquerymobile.com/test/docs/pages/popup/events.html

Answer 3

так что при использовании jQuery mobile всегда возникает проблема, если вы создаете свои ссылки через вызовы ajax. это связано с тем, что при запуске jQuery mobile имеет тенденцию изменять много вещей об элементах.

Кроме того, вы не можете создавать множественные всплывающие окна, так как, если вы работаете над проектом, подобным моему, у вас может быть много мест, где вы хотите всплывающие окна, что делает приложение медленным. Таким образом, мы делаем только одно всплывающее окно и меняем контент каждый раз, когда кто-то нажимает на ссылку.

Я создал скрипку, которая смотрит на ваш вопрос. Дайте ему выстрелили, веселит

http://jsfiddle.net/tanwaniniranjan/0hzco633/3/

HTML:

<a href="#popupBasic" data-rel="popup" data-transition="flip" class="popupcontentchanger">Open Popup</a> 

<div data-role="popup" id="popupBasic" data-overlay-theme="a"> 
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
    <div id="changehere"> <!-- We will be changing content in this div --> 

    </div> 
</div> 

JQuery:

//script to change content 
$(document).on("click",".popupcontentchanger",function(event){ 
    var newhtml = $(this).html(); 
    $(document).on("popupafteropen", "#popupBasic", function (e) { 
     $("#popupBasiC#changehere").html(newhtml); 
    }); 
}); 

//script to clear current html in the popup, on closing of popup so that every time it opens, it loads new content, without initially showing the old content. would have been better if jquery mobile added another method: popupbeforeopen :P 
$(document).on("popupafterclose", "#popupBasic", function (e) { 
    $("#popupBasiC#changehere").html(''); 
});