title: Jquery UI Dialog multiple dialog creation issue
body: <p>I have searched almost every single thing here and over the internet but i can't get this code to work. I am trying to get dialog box open when user click on php generated link which loads another page and it has a form etc.
  click on some link, it'll generate a popup, close it and then click some other or the same link, it won't open the popup.</p>
  
  <p>This is how my html is being generated</p>
  
  <pre><code>echo '&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number='.$order_numbers.'&amp;product_id='.$row['id'].'&amp;quantity='.$row['quantity'].'&amp;sale_price='.$row['sale_price'].'&amp;id='.$row['order_product_id'].'" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;'.$row['productname'].'&lt;/h3&gt;&lt;/div&gt;
      &lt;div class=quantity&gt;&lt;h3&gt;'.$row['quantity'].'&lt;/h3&gt;&lt;/div&gt;
      &lt;div class=sale_price&gt;&lt;h3&gt;'.$row['sale_price'].'&lt;/h3&gt;&lt;/div&gt;&lt;/a&gt;';
  </code></pre>
  
  <p>Jquery Code on Page:</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  &lt;script src="ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;script src="ui/jquery.ui.mouse.js"&gt;&lt;/script&gt;
  &lt;script src="ui/jquery.ui.draggable.js"&gt;&lt;/script&gt;
  &lt;script src="ui/jquery.ui.position.js"&gt;&lt;/script&gt;
  &lt;script src="ui/jquery.ui.resizable.js"&gt;&lt;/script&gt;
  &lt;script src="ui/jquery.ui.dialog.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(function() {
  
      $('.dialog').dialog({
          modal: true,
          height: 200,
          autoOpen: false,
          closeOnEscape: true,
          hide: "slide",
          open: function(event, ui) {
              var url = $('.header a').attr('href');
              alert(url);
              $(".dialog").load(url); //use the previously saved id
          },
          close: function(event, ui) {
              alert("ali");
              $(this).dialog('destroy').remove();
          }
      });
  
      $('.header a').bind("click", function(event) {
          event.preventDefault();
          $('.dialog').dialog('open');
      });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Actual HTML from Firefox Ctrl + u:</p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery/ko.js"&gt;&lt;/script&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  //custom binding to initialize a jQuery UI button
  ko.bindingHandlers.jqButton = {
      init: function(element, valueAccessor) {
          var options = ko.utils.unwrapObservable(valueAccessor()) || {};
  
          //handle disposal
          ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
              $(element).button("destroy");
          }); 
  
          $(element).button(options);  
      }    
  };
  
  ko.bindingHandlers.showModal = {
      init: function(element, valueAccessor) {
          var value = valueAccessor();
          $(element).dialog({
              close: function() {
                  if (ko.isWriteableObservable(value)) {
                     value(null);   
                  }
              }
          }); 
  
          //handle disposal
          ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
              $(element).dialog("destroy");
          }); 
      },
      update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
          var value = ko.utils.unwrapObservable(valueAccessor());
          $(element).dialog(value ? "open" : "close");   
      }
  };
  
  //wrapper to an observable that requires accept/cancel
  ko.protectedObservable = function(initialValue) {
      //private variables
      var _actualValue = ko.observable(initialValue);
      var _tempValue = initialValue;
  
      //dependentObservable that we will return
      var result = ko.dependentObservable({
          //always return the actual value
          read: function() {
             return _actualValue(); 
          },
          //stored in a temporary spot until commit
          write: function(newValue) {
               _tempValue = newValue; 
          }
      }); 
  
      //if different, commit temp value
      result.commit = function() {
          if (_tempValue !== _actualValue()) {
               _actualValue(_tempValue); 
          }  
      };
  
      //force subscribers to take original
      result.reset = function() {
          _actualValue.valueHasMutated();
          _tempValue = _actualValue();   //reset temp value 
      };
  
      return result;
  };
  
  function Item(id, name) {
    this.id = id;
    this.name = ko.protectedObservable(name);  
  }
  
  function ViewModel() {
      var self = this;
      self.items = ko.observableArray([
          new Item(1, "one"),
          new Item(2, "two"),
          new Item(3, "three")
      ]);
  
      self.selectedItem = ko.observable();
  
      self.accept = function() {
         self.selectedItem().name.commit();
         self.selectedItem(null);
      };
  
      self.cancel = function() {
         self.selectedItem().name.reset();
         self.selectedItem(null);
      }
  };
  
  ko.applyBindings(new ViewModel());
  
  $("#items").delegate(".item", "click", function() {
      var context = ko.contextFor(this);
      context.$root.selectedItem(context.$data);
      return false;
  });
  
  $(function() {
      $('.dialog').dialog({
          modal: true,
          height: 200,
          autoOpen: false,
          closeOnEscape: true,
          hide: "slide",
          open: function(event, ui) {
              var url = $('.header a').attr('href');
              alert(url);
              $(".dialog").load(url); //use the previously saved id
          }
      });
  
  
      //alert('');
      $('.header a').bind("click", function(event) {
           event.preventDefault();
           $('.dialog').dialog('open');
          //$('#dialog').load(url);
      });
  });    
  â€‹&lt;/script&gt;
  &lt;link href="style/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="style/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" /&gt;
  &lt;div id="style"&gt;
      &lt;div class="dialog"&gt;&lt;/div&gt;
  &lt;div id=header1&gt;&lt;div class=header&gt;&lt;div class=order_number&gt;&lt;h1&gt;Order Number:&lt;/h1&gt;&lt;h3&gt;1000&lt;/h3&gt;&lt;/div&gt;&lt;div class=h2&gt;&lt;h2&gt;Products&lt;/h2&gt;&lt;/div&gt;&lt;br /&gt;
                       &lt;div class=container&gt;&lt;div class=product_name&gt;&lt;h3&gt;Products&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;Quantity&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;Sale Price&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=1000&amp;product_id=14&amp;quantity=8619&amp;sale_price=98769&amp;id=66" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;Valium Diazepam&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;8619&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;98769&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=1000&amp;product_id=41&amp;quantity=1264&amp;sale_price=193248&amp;id=77" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;hhhha&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;1264&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;193248&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=1000&amp;product_id=37&amp;quantity=-1435&amp;sale_price=1302&amp;id=78" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;Tamezepaam&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;-1435&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;1302&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=header&gt;&lt;div class=order_number&gt;&lt;h1&gt;Order Number:&lt;/h1&gt;&lt;h3&gt;128&lt;/h3&gt;&lt;/div&gt;&lt;div class=h2&gt;&lt;h2&gt;Products&lt;/h2&gt;&lt;/div&gt;&lt;br /&gt;
                       &lt;div class=container&gt;&lt;div class=product_name&gt;&lt;h3&gt;Products&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;Quantity&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;Sale Price&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=128&amp;product_id=37&amp;quantity=-1435&amp;sale_price=1568&amp;id=81" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;Tamezepaam&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;-1435&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;1568&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=header&gt;&lt;div class=order_number&gt;&lt;h1&gt;Order Number:&lt;/h1&gt;&lt;h3&gt;200&lt;/h3&gt;&lt;/div&gt;&lt;div class=h2&gt;&lt;h2&gt;Products&lt;/h2&gt;&lt;/div&gt;&lt;br /&gt;
                       &lt;div class=container&gt;&lt;div class=product_name&gt;&lt;h3&gt;Products&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;Quantity&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;Sale Price&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=200&amp;product_id=37&amp;quantity=-1435&amp;sale_price=14400&amp;id=70" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;Tamezepaam&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;-1435&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;14400&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=header&gt;&lt;div class=order_number&gt;&lt;h1&gt;Order Number:&lt;/h1&gt;&lt;h3&gt;300&lt;/h3&gt;&lt;/div&gt;&lt;div class=h2&gt;&lt;h2&gt;Products&lt;/h2&gt;&lt;/div&gt;&lt;br /&gt;
                       &lt;div class=container&gt;&lt;div class=product_name&gt;&lt;h3&gt;Products&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;Quantity&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;Sale Price&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=300&amp;product_id=37&amp;quantity=-1435&amp;sale_price=1344&amp;id=73" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;Tamezepaam&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;-1435&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;1344&lt;/h3&gt;&lt;/div&gt;&lt;div class=product_name&gt;&lt;a href="edit_order.php?order_number=300&amp;product_id=14&amp;quantity=8619&amp;sale_price=1344&amp;id=80" style="text-decoration: none" title="View Details"&gt;&lt;h3&gt;Valium Diazepam&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
               &lt;div class=quantity&gt;&lt;h3&gt;8619&lt;/h3&gt;&lt;/div&gt;
               &lt;div class=sale_price&gt;&lt;h3&gt;1344&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt; 
   &lt;/div&gt;
  </code></pre>