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對話框不會消失

回答

相關問題