title: jQuery Delegate inside a Dialog - Selector didn't work
body: <p><strong>Updated with complete code</strong></p>
  
  <p>I have a jQuery dialog that I want to bind some click handler events to using jQuery delegate, but somehow it doesn't work.</p>
  
  <p>This works:</p>
  
  <pre><code>$('table.standard tbody td .delete').live('click', function() {
      alert('delete something');
  });
  </code></pre>
  
  <p>This doesn't work, this calls the alert when I click <strong>ANYWHERE</strong> within the container, but I only wants it for the <strong>".delete"</strong> selector.</p>
  
  <pre><code>$('div.container').delegate('table.standard tbody td .delete', 'click', function() {
      alert('delete something');
  });
  </code></pre>
  
  <p><strong>div.container</strong> is the div inside the dialog. I've also tried to use <strong>body</strong> and <strong>document</strong> as the container, same affect.</p>
  
  <p><strong>Here's the complete code</strong></p>
  
  <p>This kinda work, but it doesn't get bind to the <code>.delete</code> class selector, instead, it binds to the entire row.</p>
  
  <pre><code>function ClientTierDialog_class() {
      var self = this;
  
      this.fDialogBehavior = function(dialog) {
          $(dialog).find("a.button").unbind("click").bind("click", function(e) {
  
              if ($(this).hasClass("cancelButton")) {
                  $(dialog).dialog("close");
              }
              else if ($(this).hasClass("okButton")) {
                  self.saveTier();
              }
          });
      };
  
      this.$dialog = null;
  
      this.baseOptions = {
          id: "TierDialog",
          width: 585,
          height: 600,
          className: "tier-dialog",
          header: "Create Tier",
          body: "",
          buttonText: {
              cancel: "Close",
              ok: "Save"
          },
          resizable: false,
          modal: true,
          fDialogBehavior: this.fDialogBehavior
      };
  }
  
  /***************************************************************
  * Events
  ***************************************************************/
  
  ClientTierDialog_class.prototype.openDialog = function(options) {
      var self = this;
      var tierName = options.tierName;
      var url = "Administration/GetClientTierDialog";
  
      this.$dialog = null;
  
      $.ajax({
          url: url,
          data: options,
          success: function(response) {
              var $content = $(response.html);
              var options = self.baseOptions;
  
              if (tierName !== undefined &amp;&amp; tierName.length &gt; 0) {
                  options.header = "Edit Tier";
              }
  
              options.body = $content;
              WSOD.dialog(options);
  
              this.$dialog = $("div.tier-dialog");
              self.initEvents();
          },
          error: function() {
              // Handle errors
          }
      });
  };
  
  ClientTierDialog_class.prototype.delete = function() {
      $('table#addedFirms tbody tr').delegate('.delete', 'click', function() {
          alert('delete something');
      });
  };
  
  ClientTierDialog_class.prototype.initEvents = function() {
      var self = this;
      self.delete();
  };
  
  $(document).ready(function() {
      ClientTierDialog = new ClientTierDialog_class();
  });
  </code></pre>
  
  <p>Thanks.</p>