動態生成對話鏈接時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移動對話框彈出問題

回答

相關問題