jquery UI对话框不会消失

我正在使用jquery-ui选项卡和对话框功能。jquery UI对话框不会消失

每个标签在页面上都有一个按钮，用于打开对话框。这适用于其中一个选项卡。但是，如果我去第二个标签，该按钮不起作用。当我回到第一个选项卡时，对话框显示出来，但问题是我注意到，当我将开关切换到第一个选项卡时，它会一直插入新的div，而旧的div则显示：没有设置它们。

我正在使用JSP来做这件事。这就是可重复使用的jsp的样子：

<script> 
$(function() { 
    var formData = null; 
    $.ajax({ 
     url : "addFormGenerator.html", 
     success : function(data) { 
      formData = data; 
      $("#addFormDialog").html(data); 
      $("#addFormDialog").dialog({ 
       autoOpen : false, 
       height : 300, 
       width : 350, 
       modal : true, 
       buttons : { 
        "Add" : function() { 
         $(this).dialog("close"); 
        }, 
        Cancel : function() { 
         $(this).dialog("close"); 
        } 
       }, 
       close : function() { 
       } 
      }); 
     } 
    }); 
    $("#addButton").button().click(function() { 
     $("#addFormDialog").html(formData); 
     $("#addFormDialog").dialog("open"); 
    }); 
}); 
</script> 

<button id="addButton">Click here to Add New</button> 
<div id="addFormDialog" title="Add New"></div>

此jsp片段也包含在其他jsp页面中。我假设我切换标签时，旧按钮将被垃圾收集。

你能帮我理解问题并解决吗？

来源

2012-09-09 Rohit Banga

你不必渲染以下部分从JSP的响应

<div class="addFormDialog" title="Add New"></div> 

$("#addButton").button().click(function() { 
     $("#addFormDialog").html(formData); 
     $("#addFormDialog").dialog("open"); 
});

才有以下，理想与类名，而不是重复的ID

<button class="addButton">Click here to Add New</button>

UPDATE：

我仍然不认为你需要的唯一ID的 -

<div id="tabs-container"> 

    <!-- tabs here -- > 

    <-- let's say this is tab#1 --> 
     <button class="addButton">Click here to Add New</button> 
     <div class="addFormDialog" title="Add New"></div> 
    <!-- tab1 --> 
</div> 


$('#tabs-container').on('click' , '.addButton', function(){ 
    var dialogContent = $(this).siblings('.addFormDialog'); 
    //now call .dialog({..}); or whatever you need 
});

这样你要绑定监听到从.addButton冒泡，然后搜索它的兄弟.addFormDialog任何click只需点击处理程序。（我希望我没有听起来过于混乱）

来源

2012-09-09 16:08:11

感谢罗宾...你说什么是有道理的...... 这里是的jsfiddle： http://jsfiddle.net/a7x4T/14/ 但是现在所有三个对话同时显示（预期）。我有相同的ID，这样我就可以在任何地方重用jsp页面。 –

这是我最终想要的： http://jsfiddle.net/a7x4T/18/ 所以我想我应该寻找一种方便的方式来在JSP中生成唯一的ID并以某种方式将它们传递给JavaScript。如果你知道某种方式，那么你可以告诉我。基本上这个jsp片段需要是可重用的，所以任何人都可以包含它并期待按钮的工作。非常感谢罗宾！ –

@iamrohitbanga：是的:)生成唯一的ID将解决问题。你可以为此HTTP会话ID。但是，我用另一种方法更新了我的答案。 –

jquery UI对话框不会消失

回答

相关问题