javascript - jQuery UI Dialog Reuse Behavior -

each time onchange() event fires, dialog recursively nests inside new layer. how can avoid behavior. not version specific.

http://jsfiddle.net/rqlqtuj5/2/

<input type=text onchange="popdialog(this)" value="test"> <div style="display:none">     <p>dialog box</p> <div>  function popdialog(obj) { $('div')     .dialog({     buttons: {         'close': function () {             $(this).dialog('close');         }     } });} 

hey fix using empty() command clean div, example:

function popdialog(obj) {      $('div').empty();      $('div').dialog({          buttons: {              'close': function () {                  $(this).dialog('close');              }          }      });  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>  <p>change value in text box , hit tab ...close dialog , again, , again</p>  <input type=text onchange="popdialog(this)" value="test">  <div style="display:none">      <p>dialog box</p>  <div>

this way better: jsbin