如何构建一个jQuery对话框进行确认（是/否），可以在应用程序的任何地方使用？

我有以下内容：

 
 Item 1 delete 
 
 Item 2 delete 
 
 Item 3 delete 
 
 Item 4 delete 
  

我想在这里做的是随时点击.delete，我想显示一个jQuery ui对话框进行确认，是或否….如果用户说是，那么继续删除点击它将被删除的地方今天。

如何构建一个静态的jQuery UI对话框，它可以用于任意数量的列表项？ 更好，但我的应用程序中的任何东西都可以工作，所以它不仅仅是列表特定的。

想法？ 谢谢

Answer 1

使用JQuery UI对话框的示例 –

演示 – http://jsfiddle.net/CdwB9/3/

 function yesnodialog(button1, button2, element){ var btns = {}; btns[button1] = function(){ element.parents('li').hide(); $(this).dialog("close"); }; btns[button2] = function(){ // Do nothing $(this).dialog("close"); }; $("
").dialog({ autoOpen: true, title: 'Condition', modal:true, buttons:btns }); } $('.delete').click(function(){ yesnodialog('Yes', 'No', $(this)); }) 

有了现场 –

演示 – http://jsfiddle.net/CdwB9/4/

 $('.delete').live('click', function(){ yesnodialog('Yes', 'No', $(this)); }) 

Answer 2

我做了类似的事情。 在非常高的级别上，您必须停止单击的传播，显示对话框，然后根据响应再次触发单击。

 var confirmed = false; $('span.delete').click(function(e) { if (!confirmed) { var that = $(this); $( "#dialog-confirm" ).dialog({ buttons: { "Delete": function() { confirmed = true; that.trigger('click'); $(this).dialog("close"); }, Cancel: function() { $(this).dialog( "close" ); } } }); e.stopPropagation(); } else { confirmed = false; } }); 

Answer 3

你可以使用这个库： http ： //labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

然后你可以这样做：

 $(function(){ $(".delete").livequery('click', function(){ jConfirm('Message', 'Title', function(confirmed){ if(confirmed){ alert('Delete confirmed'); } }); }); }); 

我喜欢使用livequery插件，因为它适用于页面加载后添加的DOM元素。 但如果您不担心，请使用bind更改livequery 。

Answer 4

您可以将对话逻辑包装在控制器对象中。

然后，当您实例化控制器对象时，您可以在对话框将执行的元素以及ajax submision数据中传递它。

当用户在对话框中单击“是”时，您现在拥有控制器中包含的数据，您只需提交它即可。

像这样的东西：

 MyApp = {} MyApp.MyDialog = function(context, ajaxData) { this.context = context; this.ajaxData = ajaxData; this.initializeDialog(); } MyApp.MyDialog.prototype.initializeDialog = function(){ $(this.context).dialog({ //Your other dialog options here, buttons: { "yes": function(){ //Do ajax post with this.ajaxData }, "No": function(){ this.context.dialog("close"); } } }); } 

然后你可以这样做：

 var dialog = new MyApp.MyDialog("#myElement", {foo: "bar"});