避免每次单击链接时打开相同的对话框

我有一个菜单，菜单中的每个链接都通过模态对话框打开。我试图避免每次单击一个链接不止一次创建相同的对话框。避免每次单击链接时打开相同的对话框

我已经试过检查

if(outputHolder.hasClass('ui-dialog-content:visible')){return false;} 
$("body").append(outputHolder); 
outputHolder.load($this.attr("href"), null, function() {  
outputHolder.dialog(

否则将显示对话框..

任何建议？

完整代码

http://jsfiddle.net/6qgTr/5/

来源

2013-04-10 Andrés Da Viá

没有任何反应，当我点击小提琴的搜索链接。应该发生什么？ – 2013-04-10 15:33:31

所以你应该说你想在每个菜单链接上使用不同的模态弹出窗口？小提琴不再工作 – 2013-04-10 15:35:01

即时通讯说，每次我点击搜索它会创建一个新的对话框..所以即时通讯想知道如何避免这种行为，并使对话弹出只有一次，当链接被点击。 – 2013-04-10 16:01:40

你想，这样只有在第一次显示该对话框的AJAX调用时，但在随后的点击，该对话框没有Ajax调用正在重塑，重新显示正确？

如果是这样的话，我认为你首先必须摆脱下面的代码，因为它关闭时删除了对话框的元素。没有它，元素将保持不变，但被隐藏。

close: function(event, ui) { $(this).remove(); }

您还需要跟踪对话框div元素，以便您可以重新使用它们。你可以使用.data()这个方法。

function openDialog($dialogDiv) { 
    $dialogDiv.dialog({ 
     // options, but not including 'close' 
    }); 
} 

function loadEmployeesShow(link) { 
    var $link = $(link), 
     $dialogDiv = $link.data('dialogDiv'); 
    if (!$dialogDiv) { 
     console.log('creating new dialog'); 
     $dialogDiv = $('<div>'); 
     $link.data('dialogDiv', $dialogDiv); 
     $dialogDiv.load($link.attr('href'), function() { openDialog($dialogDiv); });  
    } else { 
     console.log('reusing existing dialog'); 
     openDialog($dialogDiv); 
    } 
};

jsfiddle

来源

2013-04-11 01:41:35