2012-03-07 15 views
0

完全なコードで更新jQueryの委任 - セレクターが

を動作しませんでした私は、私はjQueryのデリゲートを使用して、いくつかのクリックハンドラのイベントをバインドするjQueryのダイアログを持っていますが、何とかそれは動作しません。 。

これは動作します:

$('table.standard tbody td .delete').live('click', function() { 
    alert('delete something'); 
}); 

これは動作しません、私はANYWHEREコンテナ内をクリックしたときにこのアラートを呼び出しますが、私は唯一の「.delete」セレクタのためにそれを望んでいます。

$('div.container').delegate('table.standard tbody td .delete', 'click', function() { 
    alert('delete something'); 
}); 

div.containerは、ダイアログ内のdiv要素です。私はまた、の文書を同じように使用しようとしました。代わりに、それは行全体に結合する、

はここで完全なコード

これはちょっと仕事だが、それは.deleteクラスセレクタにバインドを取得できません。

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 && tierName.length > 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(); 
}); 

ありがとうございます。

+1

'delegate'の実行時に' div.container'は存在しますか? (DOMレディイベントハンドラ内にあるのですか?) –

+0

ダイアログが開いたときに 'div.container'が存在します。ありがとう。 – Saxman

+0

あなたのHTMLとJSをもっと投稿してください。 – shanabus

答えて

0

、それがあることが考えられます。

$(document).delegate('table.standard tbody td .delete', 'click', function() { 
    alert('delete something'); 
}); 
1

用途:確かにそのハードあなたのコードの多くを見ることなく

$('table.standard').on('click', '.delete', function() { 
    alert('delete something'); 
}); 
+0

$(ドキュメント)を取得できませんでした。試した$( 'ボディ')と私はどこでも警告コールをクリックした! – Saxman

2

jQueryの基準はonおよびバージョン1.7以降とoffに傾いていますダイアログが初期化される前、またはdiv.content要素が存在する前にデリゲートを追加してください。その場合、div.containerは存在しない可能性があり、したがってバインドされません。

これを試してみてください:http://jsbin.com/itiyel/4/edit#preview

これが動作しているようですし、多分それはあなたを助けるでしょう。

+0

私たちはまだjQuery 1.5上にいるので、 "on"はオプションではありません。ありがとう。 – Saxman

+0

あなたは、jQueryのアップグレードは簡単に推奨されるだけではありません。彼らは1.5以降、たくさんのバグを修正し、驚くほどのパフォーマンス改善を行っています。 – AlienWebguy

+0

私は理解していますが、私はその決定を下すことはできません:) MVC 4ベータ版が既にリリースされている場合、私たちはまだASP.NET MVC 1にいます! – Saxman