动态生成对话链接时jquery移动对话框弹出问题

我正在使用JQuery Mobile并动态设置对话框链接。用户单击该链接后，该对话框会在单独的页面中打开，而不会在弹出的对话框中打开。我有下面的工作代码。有人可以告诉我我做错了什么吗？动态生成对话链接时jquery移动对话框弹出问题

由于提前，

Vish

下面是此示例中的链接的jsfiddle http://jsfiddle.net/vishr/ekLWd/

当用户点击添加项目，我动态地更改文本到删除的项，当用户点击删除项目，我把一个对话框，在这种情况下打开一个单独的页面，而不是弹出对话框

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
<script type="text/javascript"> 

(function(){ 
$(document).ready(function() { 
    $("#del-item").live('click', function(){ 
    $.mobile.changePage($('#del-dialog'), 'pop'); 
    });  
    $("#add-item").live('click', function(){ 
     $('#add-item .ui-btn-text').text('Remove Item'); 
     $('.item').attr('id', 'del-item'); 
     $('.item').attr('href', '#del-dialog'); 
     $('.item').attr('data-rel', 'dialog'); 
    });  
    $("#close-dialog").click(function(){  
     $('.ui-dialog').dialog('close'); 
    }); 
}); 
})(); 
</script> 
</head> 
<body> 

<div data-role="page"> 

<div data-role="header"> 
<h1>Page Title</h1> 
</div><!-- /header --> 

<div data-role="content"> 
     <div id="dialog-container" data-inline="true"> 
     <a href="#" class="item" id="add-item" data-role="button" data-inline="true">Add Item</a> 
     </div> 
</div><!-- /content --> 

<div data-role="footer"> 
<h4>Page Footer</h4> 
</div><!-- /footer --> 
</div><!-- /page --> 
    <div data-role="dialog" role="dialog" id="del-dialog"> 
    <div data-role="content"> 
      <div style="text-align:center;"><strong>Remove Item?</strong></div> 
      <form id="myForm"> 
       <div data-role="fieldcontain"> 
        <fieldset class="ui-grid-a"> 
         <div class="ui-block-a"><a href="#" id="close-dialog" data-theme="a" data-rel="back" data-role="button">Cancel</a></div> 
         <div class="ui-block-b"><a href="#" id="close-dialog" data-theme="a" type="submit" data-role="button">OK</a></div> 

        </fieldset> 
       </div> 
      </form> 
     </div> 
    </div> 

</body> 
</html>

来源

2011-08-19 Vish

如果你想让对话框在同一页面打开，那么你应该使用jQuery Mobile的SimpleDialog插件。

下面是代码中使用SimpleDialog插件，从而使对话框出现在同一页面

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script> 
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script> 
<script type="text/javascript"> 

(function(){ 
    $(document).ready(function() { 
     $("#del-item").live('click', function(){ 
     //$.mobile.changePage($('#del-dialog'), 'pop'); 

        $(this).simpledialog({ 

         'prompt' : 'What do you say?', 
         'cleanOnClose': true, 
         'buttons' : { 
          'OK': { 
           click: function() { 
            $('#simplestringout').text($('#simplestring').attr('data-string')); 
           } 
          }, 
          'Cancel': { 
           click: function() { console.log(this); }, 
           icon: "delete", 
           theme: "c" 
          } 
         } 
        }) 
      });  
     $("#add-item").live('click', function(){ 
      $('#add-item .ui-btn-text').text('Remove Item'); 
      $('.item').attr('id', 'del-item'); 
      $('.item').attr('href', '#del-dialog'); 
      $('.item').attr('data-rel', 'dialog'); 
     });  
     $("#close-dialog").click(function(){  
      $('.ui-dialog').dialog('close'); 
     }); 
     }); 
    })(); 
</script> 
<title>Page Title</title> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1>Page Title</h1> 
</div><!-- /header --> 
<div data-role="content"> 
     <div id="dialog-container" data-inline="true"> 
     <a href="#" class="item" id="add-item" data-role="button" data-inline="true">Add Item</a> 
     </div> 
</div><!-- /content --> 
<div data-role="footer"> 
<h4>Page Footer</h4> 
</div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html>

来源

2012-03-21 10:21:11

我不喜欢没有任何评论downvoting我所定制的 - 所以我投你了。 – headkit

动态生成对话链接时jquery移动对话框弹出问题

回答

相关问题