javascript - JQM 1.4.2 从ajax添加模板到弹出窗口不渲染

Question

我通过 .get 从 php 文件获取模板，但无法正确渲染输入或 ListView 。

当我直接在 js 文件中附加 html 时，它将正确呈现，因此我认为它与模板中的数据返回方式有关。

提前致谢。

js

$(document).ready(function() {
$('#addOffice, #addDoctor').on('click', function() {

    var $popUp = $("<div/>").popup({
    dismissible : false,
    theme : "b",
    overlayTheme : "b",
    transition : "pop"
    }).on("popupafterclose", function() {
        $(this).remove();
    }).css({
        'width': '400px',
        'padding': '10px'
    });     
    $.get('../templates/'+$(this).attr('id')+'.php', function(data){
        $(data).appendTo($popUp);
    });
    $popUp.popup('open').trigger("create");
});
});

PHP 模板

<form id="doctorAdd">
    <div class="ui-field-contain">
        <label for="doctorName">Full Name<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( Required )</span></label>
        <input type="text" name="doctorName" id="doctorName" placeholder="Full Name" value="">
    </div>    
    <div class="ui-field-contain">
        <label for="doctorDOB">DOB<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( Required )</span></label>
        <input type="text" name="doctorDOB" id="doctorDOB" placeholder="DOB" value="">
    </div>    

    <ul data-role="listview" data-inset="true" style="margin:20px 0px 0px 0px;">
      <li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">Add</a></li>
      <li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">Clear</a></li>
    </ul> 
</form>

Answer 1

工作示例:http://jsfiddle.net/Gajotres/45V7G/

JavaScript:

$(document).on('pageshow', '#index', function(){ 
    $(document).on('click', '#addPopup',function() {
        // close button
        var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();
        
        // text you get from Ajax
        var content = '<form id="doctorAdd"><div class="ui-field-contain"><label for="doctorName">Full Name<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( Required )</span></label><input type="text" name="doctorName" id="doctorName" placeholder="Full Name" value=""></div>    <div class="ui-field-contain"><label for="doctorDOB">DOB<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( Required )</span></label><input type="text" name="doctorDOB" id="doctorDOB" placeholder="DOB" value=""></div>    <ul data-role="listview" data-inset="true" style="margin:20px 0px 0px 0px;"><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">Add</a></li><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">Clear</a></li></ul> </form>';
        
        // Popup body - set width is optional - append button and Ajax msg
        var popup = $("<div/>", {
            "data-role": "popup",
            "class" : "ui-content"
        }).css({
            "width": "400px"
        }).append(closeBtn).append(content);
        
        // Append it to active page
        $(".ui-page-active").append(popup);
        
        // Create it and add listener to delete it once it's closed
        // open it
        $("[data-role=popup]").on("popupafterclose", function () {
            $(this).remove();
        }).on("popupafteropen", function () {
            $(this).popup("reposition", {
                "positionTo": "window"
            });
        }).popup({
            dismissible : false,
            theme : "b",
            overlayTheme : "b",
            transition : "pop"
        }).enhanceWithin().popup("open");           
    }); 
});

• 使用.enhanceWithin()代替trigger('create')
• trigger('create') 已弃用，仅在页面内容 div 上正确使用

最后一件事，这里使用的代码不会像这样工作，因为你使用的是 $.get，因为它是异步过程，基本上你需要使用回调函数完成来增强你的代码。

基本上你的代码应该是这样的:

$.get( '../templates/'+$(this).attr('id')+'.php').done(function( data ) {
    // close button
    var closeBtn = $('<a href="#" data-rel="back" data-role="button" data-theme="b" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>').button();
    
    // text you get from Ajax
    //var content = '<form id="doctorAdd"><div class="ui-field-contain"><label for="doctorName">Full Name<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( Required )</span></label><input type="text" name="doctorName" id="doctorName" placeholder="Full Name" value=""></div>    <div class="ui-field-contain"><label for="doctorDOB">DOB<span style="color:rgba(191,191,191,1.00); font-size:.8em; float:right;"> ( Required )</span></label><input type="text" name="doctorDOB" id="doctorDOB" placeholder="DOB" value=""></div>    <ul data-role="listview" data-inset="true" style="margin:20px 0px 0px 0px;"><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">Add</a></li><li><a href="#" style="text-align:center;" data-rel="back" class="ui-btn ui-mini">Clear</a></li></ul> </form>';
    
    // Popup body - set width is optional - append button and Ajax msg
    var popup = $("<div/>", {
        "data-role": "popup",
        "class" : "ui-content"
    }).css({
        "width": "400px"
    }).append(closeBtn).append(data); // Here we are using data response from $.get
    
    // Append it to active page
    $(".ui-page-active").append(popup);
    
    // Create it and add listener to delete it once it's closed
    // open it
    $("[data-role=popup]").on("popupafterclose", function () {
        $(this).remove();
    }).on("popupafteropen", function () {
        $(this).popup("reposition", {
            "positionTo": "window"
        });
    }).popup({
        dismissible : false,
        theme : "b",
        overlayTheme : "b",
        transition : "pop"
    }).enhanceWithin().popup("open");           
});