如何正确写入“您确定要删除/创建/ etc？” jquery中的对话框 [英] How to write properly an "Are you sure you want to delete/create/etc?" dialog box in jquery

问题描述

我已经发布了这个主题 - 如何在JavaScript 中传递函数作为参数，以创建具有多种功能的弹出框请求。

其中一个答案说明了一个问题我认为应该有一个新的线程。

我的任务是这个 - 我有几个按钮，每个项目（假设我有几篇文章和每个我可以删除，编辑等） - 对于每个按钮，我想要一个弹出框，问我是否确定或不确定我要做这个任务。

如何正确执行？

这是一个示例，当我点击删除按钮时会发生什么： / p>

  $（'。delete'）点击（function（）{
 var obj = {title： ，someText：你确定吗？}; 
 DisplayPopUp（obj，function（）{console.log（'去删除'）;}）; 
 }）;我有你确定吗？
  

弹出 - 这是弹出功能：

  function DisplayPopUp（obj，callback）{
 
 // On Action Clicked 
 $（'＃actionButton'）。click（function（e）{
 e.preventDefault（）; 
 callback（obj）; 
}）; 
} 
  

我的主要关注点是，每次我点击删除按钮 - 我将你确定按钮功能。 在重新创建之前，如何删除此事件？我需要在哪里放置？

并且一般来说 - 这是正确的方法来做，还是有一个更好，更干净的代码（假设我需要做，而不使用jQuery-UI？

考虑到我想要它流程和工作在几个任务，如创建/删除/编辑等...

谢谢，
阿隆

=========== THE HTML ==============

看起来像这样： - 我使用$（'content'）。html（theContentIneed）填充内容并切换显示模式来隐藏/取消隐藏。

 < div id =popup> 
< div id =content> 
< / div> 
< a id =actionButton> action< ; / a> 
< / div> 
  

解决方案

p>现在我们可以看到你只是隐藏/显示HTML（不是创建/破坏它），你可以解决太多的点击处理程序的问题在任何事情开始前分配事件处理程序一次，并使用.data（）方法存储您的上下文：

  $（'＃actionButton '）.click（function（e）{
 e.preventDefault（）; 
 var fn = $（this）.data（callback）; 
 fn（）; 
}）; 
 
 function DisplayPopUp（obj，callback）{
 $（'＃actionButton'）。data（callback）= function（）{callback（obj）;}; 
 / /做其他的东西在这里使弹出窗口可见，等... 
} 
  

或如果你真的想这样做，而且正在使用jQuery 1.7 +：

  function DisplayPopUp（obj，回调）{
 
 // On Action Clicked 
 $（'＃actionButton'）。on（'click'，（function（e）{
 $（this）.off （'click'）; 
 e.preventDefault（）; 
 callback（obj）; 
}）; 
} 
  pre> 
I have posted on this thread - How do I pass function as a parameter in javascript for creating pop up box request with several functionality.

One of the answers there stated a problem that I thought should have a new thread.

My task is this - I have several buttons for each item (let's say I have several articles and each one I can delete, edit etc..) - for each button I want a pop up box that asks me if I'm sure or not sure I want to do this task.

How do I do it correctly?

this is an example for what happens when I click on of the delete buttons:
$('.delete').click(function(){
    var obj={title:"The Header",someText:"Are you sure?"};
    DisplayPopUp(obj,function(){console.log('going to delete');});
});
after I have the "are you sure?" pop up - this is the pop up function:
function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').click(function(e){
       e.preventDefault();
       callback(obj);
    });
}
My main concern is that each time I click the delete button - I multiply the "are you sure" button function. How do I delete this event before I re-create it? Where do I need to put it?

and in general - is this the right method to do it or is there a better, cleaner code (assuming I need to do it without using jQuery-UI?

take to consideration that I want it to be fluid and to work on several tasks like create/delete/edit etc...

thanks,
Alon

=========== THE HTML ==============

looks like this: - I use $('content').html(theContentIneed) to fill the content and toggle display modes to hide/unhide it.
<div id="popup">
   <div id="content">
   </div>
   <a id="actionButton">action</a>
</div>

解决方案
Now that we can see that you're only hiding/showing the HTML (not creating/destroying it), you can solve the issue of too many click handlers by assinging the event handler once before anything starts and use the .data() method to store your context:
$('#actionButton').click(function(e){
   e.preventDefault();
   var fn = $(this).data("callback");
   fn();
});

function DisplayPopUp(obj, callback) {
    $('#actionButton').data("callback) = function() {callback(obj);};
    // do other stuff here to make the popup visible, etc...
}
Or, if you really wanted to do it the way you were doing it and are using jQuery 1.7+:
function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').on('click', (function(e){
       $(this).off('click');
       e.preventDefault();
       callback(obj);
    });
}


                        
这篇关于如何正确写入“您确定要删除/创建/ etc？” jquery中的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！