0

フルスクリーンのjQueryダイアログを作成しています。

<div>ダイアログのヘッダーとして機能するカスタムを作成しています。

の中身<div>は<table>. に<table>は 1<tr>が含まれ、これには 5 が含まれます<td>。それぞれの内部に<div>は、ダイアログのヘッダーに表示される実際のコンテンツがあります。

ユーザーがヘッダー内の情報を編集できるように、いくつかのjQueryボタンオブジェクトを表示しようとしています。ボタンにクリック イベントを追加し、ヘッダーに別のクリック イベントを追加しました。ボタンをタップすると、ヘッダーのクリック イベントが呼び出されますが、ボタンのクリック イベントは呼び出されません。

ダイアログ ヘッダーのクリック コードは次のとおりです。

$(dialog)
    .parent()
    .find('.ui-dialog-titlebar').click(
        function () {
            $(dialog).dialog('close').remove();
        }
    );

ボタン作成コードは次のとおりです。

var editBtn = $('<button>');
editBtn
    .css('height', '2.2em')
    .css('float', 'right')
    .button(
        {
            text: false,
            icons:
                {
                    primary: 'ui-icon-pencil'
                }
        }
    )
    .on(
        'click',
        function () {
            alert('Edit clicked');
            EditClicked(this);
            return false;
        }
    );

どうすればこれを修正できますか？

4

2 に答える 2

0

.onおそらくあなたが望むものではありません。その目的は、作成された時期に関係なく、特定の要素内の特定のセレクターに一致する要素に汎用イベントハンドラーをアタッチすることです。

代わりに必要なのは.bind()、イベントハンドラーを特定のオブジェクトにアタッチすることです。

したがって、このコードは次のように機能するはずです。

var editBtn = $('<button>');
editBtn
    .css({
        'height': '2.2em',
        'float': 'right'
    })
    .button(
        {
            text: false,
            icons:
                {
                    primary: 'ui-icon-pencil'
                }
        }
    )
    .bind(
        'click',
        function () {
            alert('Edit clicked');
            EditClicked(this);
            return false;
        }
    );

（プラスとして：.css()オブジェクトを渡すことで連鎖を回避できます）。

于 2012-08-10T19:19:35.897 に答える
0

<button>jQuery では、 の代わりに を選択している可能性がありますbutton。タグで囲まれたhtmlオブジェクトを選択しようとしたことはありません。スタイルはボタンに追加されますか? また、css にハッシュを使用します。

.css({'height':'2.2em','float':'right'})

css を 2 回呼び出すと、高さが上書きされる可能性があります。

.closest('.ui-dialog-titlebar')の2 つのメソッド呼び出しを行う代わりに、別のヒントを使用し.parent().find()ます。

乾杯！

于 2012-08-10T17:52:43.237 に答える