Question

我正在尝试使用动态内容在Jquery移动设备中创建对话框，并且我正在显示列表视图。现在，当用户单击列表视图中的项目时，对话框应该关闭，所选项目应显示在文本框中。用户在文本框中单击时将显示该对话框。

我的问题是第一次显示对话框并显示列表视图。但我无法获得所选项目。

第二次当用户点击同一文本框时，不会显示该对话框。

代码：

<div id="inlinecontent" style="display:none" 
data-options='{"mode":"blank","headerText":"Select","headerClose":true,"blankContent":true}'>
    <a rel='close' data-role='button' href='#'>Close</a>
</div>


<script type="text/javascript">
document.addEventListener('deviceready', function () {

    $('#addadult').click(function(){
        var adult = document.getElementById('totaladult').textContent;
        alert(adult); 
        var myInteger = parseInt(adult);
        myInteger+=1;
        document.getElementById('totaladult').textContent=myInteger;
    });
    /*      $('#listviewfrom').delegate('li', 'click', function () {
                    $("#txtFrom").val(this.textContent);
                    $("#txtFrom").trigger('refresh');
                    $("#popupMenu" ).popup( "close" )
                    $("#popupMenu ul").hide();

                });    */
                $('#listviewto').delegate('li', 'click', function () {
                    $("#txtTo").val(this.textContent);
                    $("#txtTo").trigger('refresh');
                    $("#popupMenu1" ).popup( "close" )
                    $("#popupMenu1 ul").hide();
                });    


                $('#txtFrom').click(function(){

                    var labels='<ul data-role="listview"  data-theme="c" id="listviewfrom" data-filter="true">';
                    try {
                        BookingCities = getJsonData();
                        $.each(BookingCities["BookingCities"], function(i, val) {
                            labels += '<li data-icon="up"><a href="#" rel="close" onclick="test("'+val.CityName +'")">' + val.CityName + '(' + 

                                val.CityCode + '),' + val.CountryName + ' </a></li>';
                        });
                        labels+='</ul>';
                        $('#inlinecontent ul').listview('refresh');                            
                        $("#inlinecontent").html(labels);     
                        $('#inlinecontent ul').show();
                        $("#inlinecontent").simpledialog2();

                    } 
                    catch (ex) 
                    {

                    }
                });


                $("#txtTo").click(function()
                                  {
                                      var labels='';
                                      BookingCities = getJsonData();
                                      $.each(BookingCities["BookingCities"], function(i, val) 
                                             {
                                                 labels  += '<li data-icon="up"><a href="#">' + val.CityName+'(' +val.CityCode+'),'+ val.CountryName+' </a></li>';
                                             });

                                  });

                navigator.splashscreen.hide();
            }, false);     
</script>

如果有人可以提供帮助，我将感激不尽

Answer 1

尝试在SimpleDialog2选项中添加＆＃34; blankContentAdopt＆＃34;：true。这应该有助于重新启动动态内容：

<div id="inlinecontent" style="display: none" data-options='{"mode":"blank","headerText":"Select","headerClose":true,"blankContent":true, "blankContentAdopt": true}'>

对于添加动态内容的脚本，您可以删除任何现有列表$('#inlinecontent ul').remove();，然后构建列表并将其添加到内容中，以便关闭按钮保留在列表下方。在我的示例代码中，我使用的是城市数组而不是仅用于演示的对象：

$(document).on("click", "#txtFrom", function () {

    $('#inlinecontent ul').remove();
    var labels='<ul data-role="listview" data-theme="c" id="listviewfrom" data-filter="true" >';
    try {
        for (var i=0; i< MyFromCities.length; i++){
            labels += '<li data-icon="up"><a href="#" >' + MyFromCities[i][0] + '(' + MyFromCities[i][2] + '), ' + MyFromCities[i][1] + ' </a></li>';
       }

        labels+='</ul>';

        $("#inlinecontent").prepend(labels).simpledialog2({ width: '75%'});
    } 
    catch (ex) {}
});

然后将一个点击处理程序添加到listitem锚点，您可以在关闭弹出窗口之前获取文本并将其放在文本框中：

$(document).on("click", ".ui-simpledialog-container #listviewfrom li a", function(){
    //alert($(this).text());
    $("#txtFrom").val($(this).text());
    $.mobile.sdCurrentDialog.close();
});

要使滤镜元素运行，您可能需要添加一些CSS来移除负边距：

.ui-simpledialog-container .ui-listview-filter {
    margin: 0;
}

这是 DEMO

Jquery Mobile动态对话框，listview事件无法绑定

1 个答案: