0

을 포함 나는 내 문제 보여주는 a simple test case을 준비했습니다 - 나는 jQuery를 UI 대화 상자 열기 위해 jQuery를 UI 버튼을 사용는 jQuery를 UI 대화를 여러 번 열 수 없습니다 - 테스트 케이스가

을 그러나

screenshot

을 이것은 한 번만 작동합니다. 다음 버튼 클릭에 나는 오류를 얻을 :

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

내 코드에서 버튼을하기 전에 대화 상자를 초기화 할 수 있지만

error in console

-

HTML 코드 :

<BUTTON ID="newBtn">New game</BUTTON> 

<DIV ID="newDlg" TITLE="New game"> 
    Select game board: 
    <BUTTON value="1">Winter</BUTTON> 
    <BUTTON value="2" DISABLED>Spring</BUTTON> 
    <BUTTON value="3" DISABLED>Summer</BUTTON> 
    <BUTTON value="4" DISABLED>Autumn</BUTTON> 
</DIV> 

자바 스크립트 :

var newDlg = $('#newDlg').dialog({ 
     modal: true, 
     autoOpen: false, 
     close: function(e, ui) { 
       var bid = parseInt($(this).data('bid')); 
       $(this).removeData(); 
       if (1 <= bid && bid <= 4) { 
         alert('selected board id: ' + bid); 
       } 
     }, 
     buttons: { 
       'Close': function() { 
         $(this).dialog('close'); 
       } 
     } 
}); 

$('#newDlg button').button().click(function(e) { 
     e.preventDefault(); 
     var bid = this.value; 
     newDlg.data('bid', bid); 
     newDlg.dialog('close'); 
}); 

var newBtn = $('#newBtn').button().click(function(e) { 
     e.preventDefault(); 
     newDlg.dialog('open'); // also tried $('#newDlg') here! 
}); 

jQuery UI 1.11.4 및 1.12.1을 사용해 보았지만 문제가 지속됩니다.

답변

1

재미있는 이야기는,이 문제는 다음과 같습니다

$(this).removeData(); 

이 대화 상자를 정의하는 데 사용 포함한 모든 data 속성을 제거하고 있습니다. 제거 할 특정 데이터를 정의하면이 문제를 해결할 수 있습니다.

$(this).removeData('bid'); 

그런 다음 예상대로 작동합니다.

포킹 된 작업 예 : https://jsfiddle.net/Twisty/dz8krbye/