2

我动态创建了一个列表视图，但我不知道如何从所选列表中获取数据以显示在对话框中。我尝试了几种方法，但都失败了。我唯一正确的是在点击时调用对话框。

我想在弹出的对话框中显示整个消息

我的代码

<body>
   <div data-role="page" id="messages">
            <div data-theme="a" data-role="header">
             <a data-role="button" href="index.html" data-transition="slide"
                data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
                    Back
                </a>
            <a href="#" onclick="window.location.reload()" data-icon="back" data-iconpos="notext">Refresh</a>
                <h3>
                   Alerts
                </h3>
            </div>
            <div data-role="content">           
            <script type="text/javascript">
                            $(document).on("pagebeforeshow", "#messages", function() {
                            var uid = $.cookies.get( 'uid' );
                            if(uid == null){
                                 $.mobile.changePage( "account-login.html", { transition: "slide"} );}
                                     $(function(){
                                $.getJSON("ajaxResponder.php?method=messages",function(data){

                                            var htmlString ="";

                                                $.each(data.messages,function(index,item){
                                                htmlString +='<li data-name='+item.msgid+'><a href="#">'+
                                                                '<h3 class="topic">'+item.subject+'</h3>' + 
                                                                '<p>From: '+item.sender+'</p>' +
                                                                '<p>Date: '+item.added+'</p>' +
                                                                '<p>'+ item.message +'</p></a></li>' ;

                                                });

                                                $('#list').html(htmlString);
                                                $('#list').listview('refresh');
                                            });  
                            });
                           });     
                        </script>
                <ul id="list"  data-role="listview" data-theme="d"></ul>
        </div>
        <script>
 $('#list').on('click', 'li', function() {
    $.mobile.changePage("#dialog", {
        role: "dialog"
    }); 
     });    
        </script>
</div>
<div data-role="page" data-rel="dialog" id="dialog" data-theme="c" data-close-btn="right">
    <div data-role="header" data-position="fixed" data-theme="b">
         <h1>New values added!</h1>

    </div>
    hello
<!-- display item.message here -->
    </ul>
</div>      

</body>
</html>
4

1 回答 1

2

更新

根据您的评论，要读取父元素的任何数据，请使用.closest().

只需阅读<a>按钮的文本并将其附加到对话框中。我将 div#msg用于演示目的。

演示

$('#list').on('click', 'li a', function () {
 var text = $(this).closest('li').attr('data-name');
 $('#msg').empty();
 $('#msg').append(text);
 $.mobile.changePage("#dialog", {
    role: "dialog"
 });
});
于 2013-05-08T10:45:40.293 回答