jQueryのUIダイアログ - 次のように私は、私のjQuery UIのダイアログタイトルバーにカスタムボタンを追加したカスタムボタン

Question

のためのハンドラを追加します。

$('#dialog').html(html); 
$('#dialog').dialog({ 
    modal: true, 
    open: function(event, ui) { 
     $(".ui-dialog-titlebar").append("<a href=\"#variants\" id=\"variants-button\"><img src=\"admin-images/variants-button.png\" alt=\"Variants\" /></a>"); 
    } 
}); 

は、今私は、このボタンを「クリック」ハンドラを追加する必要がありますが、Iこれに苦しんでいます。

$('#variants-button').click(function(){ 
    $('#information').hide(); 
    $('#variants').show(); 
    return false; 
}); 

これは何もしません。私もクリックハンドラを 'デリゲート'に入れようとしましたが、それはどちらもうまくいきません。何か案は？

編集：zysoftは正しい解決策を提供しましたが、私はこれをページ上の複数のダイアログで使用する必要があります。複数のダイアログで期待どおりに動作しないようです。

Answer 1

ダイアログボックスが開いたときに、実行時にボタンが追加されます。あなたがクリックハンドラを割り当てた後に起こるようです。これを試してみてください：

$('#variants-button').live('click', function(){ 
    $('#information').hide(); 
    $('#variants').show(); 
    return false; 
}); 

Answer 2

HTMLを追加した後に実行しますか？そうでない場合は、jQuery live insteedを使用してみてください。

$('#variants-button').click(function(){ 
    $('#information').hide(); 
    $('#variants').show(); 
    return false; 
}); 

Answer 3

なぜ新しいボタンを追加した後にクリックハンドラを作成しないのですか？

$('#dialog').html(html); 
$('#dialog').dialog({ 
    modal: true, 
    open: function(event, ui) { 
     $(".ui-dialog-titlebar").append("<a href=\"#variants\" id=\"variants-button\"><img src=\"admin-images/variants-button.png\" alt=\"Variants\" /></a>"); 
     $('#variants-button').click(function(){ 
      $('#information').hide(); 
      $('#variants').show(); 
      return false; 
     }); 
    } 
}); 

DOMに要素を追加した後でイベントハンドラを追加する場合は、OKです。あなたが複数のダイアログのタイトルボタンにこのような何かをしたい場合

UPDATE 、あなたの更新に基づき、デリゲートは（あなたがすべてのダイアログのためにこれを行うことを回避ますので）良いかもしれません。私はこれが役に立てば幸い

$('.variant-class').on('click', function() { 
    $('#information').hide(); 
    $('#variants').show(); 
    return false; 
}); 

：

あなたは、あなたのonハンドラにセレクタとして使用しますマーカークラスとして動作し、あなたのボタン（例えばvariant-class）にクラスを適用することができます。がんばろう！