通过遍历DOM在jquery的web页面上支持多个对话框

Question

我已经尝试了所有可以想到的组合，并且出于某种原因无法让此代码正常运行。对话方法是正确的。当我直接点击“.dialog”而不尝试遍历时，一切运行正常。如果我有多个对话框，它们将一个接一个打开。

这是可能的遍历？我错过了什么吗？

我希望这不是太模糊，如果有任何问题，请让我知道。

非常感谢您的帮助！

我的代码如下：

HTML：

 <div class = "opener">Click for Item Numbers</div> 
     <div class = "dialog" title = "Dialog"> 
      Dialog box 
      </div> 



     <div class = "opener">Click for Item Numbers</div> 
     <div class = "dialog" title = "Dialog"> 
      Dialog box 
     </div> 

的jQuery：

//jquery ui dialog box 

    $('.dialog').dialog({ 
    autoOpen: false, 
    modal: true, 
    show: { 
     effect: "blind", 
     duration: 1000 
     }, 
    hide: { 
     effect: "explode", 
     duration: 1000 
    } 

}) 

    //jquery open function for dialog 

$(function() { 

$('.opener').on('click', function() { 
    $(this).next('div.dialog').dialog('open'); 


    }); 
    }); 
}); 

Answer 1

的DOM得到所有重新排列，当你开始.dialog()。我的建议是在创建对话框之前保存元素，然后通过引用将其打开。

$(function() { 

    $('.opener').each(function() { 
     $(this).data('dialog', $(this).next('div.dialog')); 
    }); 

    //jquery ui dialog box 

    $('.dialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     show: { 
      effect: "blind", 
      duration: 1000 
     }, 
     hide: { 
      effect: "explode", 
      duration: 1000 
     } 

    }); 

    //jquery open function for dialog 

    $('.opener').on('click', function() { 
     $(this).data('dialog').dialog('open'); 


    }); 
}); 

见小提琴这里：http://jsfiddle.net/q8m844so/