Jquery UI 대화 상자가 사라지지 않습니다.

Question

jquery-ui 탭과 대화 상자 기능을 사용하고 있습니다.

각 탭에는 대화 상자를 여는 페이지에 단추가 있습니다. 이것은 탭 중 하나에 적용됩니다. 그러나 두 번째 탭으로 이동하면 버튼이 제대로 작동하지 않습니다. 다시 첫 번째 탭으로 돌아 왔을 때 대화 상자가 나타나지만 첫 번째 탭으로 앞뒤로 전환 할 때마다 문제가 발생합니다. 이전 div의 display : none 설정시 새 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 페이지에 포함되어 있습니다. 탭 사이를 전환 할 때 이전 단추가 가비지 수집 될 것으로 가정하고있었습니다.

문제를 이해하고 해결할 수 있도록 도와 줄 수 있습니까?

Answer 1

당신은 이상적으로 클래스 이름,

---

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

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

그냥 다음 한 당신의 JSP의 응답에서 다음 부분을 렌더링하지 및 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 수신 한 번의 클릭 핸들러를 바인딩하고 있습니다. 지금 그러나 http://jsfiddle.net/a7x4T/14/ :

로빈은 ... 당신이 말하는 무슨 말이