2

jQueryとjQueryUIを備えたWebサイトがあります。私はJavascript関数を持っています：

function ToButton()
{
$(".ToButton").button();
}

この関数は、ページの読み込み後に実行され、クラス「ToButton」のすべての要素を変更します。

また、ユーザーがボタンを押すとHTMLコードが変更されます。例えば：

$("body").append('<span class="ToButton">Test Button</span>');

また、この新しい要素に対してToButton関数も実行したいのですが、jQueryのライブメソッドまたはデリゲートメソッドには「show」または「create」イベントタイプがありません。したがって、すべてのHTMLコードを変更した後、関数ToButton（）を呼び出す必要があります。

ToButton関数をすべての要素に委任する方法を教えてください。

4

4 に答える 4

2

新しい要素を追加した後、これを手動で行う必要があります。デリゲートとライブ イベントは、バブルアップするイベント専用です。

ただし、いくつかのDOM イベントをリッスンして、新しい要素が追加されたときに通知を受け取ることで、作業をより簡単にすることができます。

于 2011-04-22T07:52:35.253 に答える
2

これは、いくつかの方法で実現できます。

1)変異イベントまたはオブザーバーを使用する

最初の方法は簡単に検索できます。DOM Level 3 Mutation Events の詳細については、http: //help.dottoro.com/ljmcxjla.phpを参照してください。また、新しい DOM Level 4 Mutation Observersについては、 https://developerを参照してください。 .mozilla.org/en-US/docs/DOM/MutationObserver

DOM Level 3 Mutation Events は現在広くサポートされていますが、特定のブラウザーでパフォーマンスを低下させる可能性のある非推奨の API です。以下の #2 は、CSS アニメーションをサポートするすべてのブラウザーで機能する方法を使用しており、パフォーマンスを損なうことはありません。

2)私が考案した CSS キーフレーム アニメーション イベント メソッドを使用して、DOM ノードの挿入を検出します。

ダミーのキーフレーム アニメーション イベントを使用して、ブラウザの内部 CSS スタイリング メカニズムによってノードが解析されるたびに、挿入イベント通知をバブルアップすることができます。 04/25/i-want-a-damnodeinserted/

于 2012-12-27T20:22:45.710 に答える
0

うーん、私がそれを正しく理解したかどうかはわかりませんが、これは機能しませんか?:

$("body").append( $('<span class="ToButton">Test Button</span>').button() )

ご参考までに: http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm

于 2011-04-22T07:51:40.530 に答える
0

次のような単純な関数を作成できます。

function AddButton (parent, buttonElement) {
    $(buttonElement).addClass('.ToButton').appendTo($(parent)).button();
}

のように使う

AddButton('body', '<span>Test Button</span>');

最も良い方法ではありませんが、単純な jQuery プラグインなどを作成することもできます。一般的なアイデアを提示しただけです（同様の方法で構築された関数を使用したため、このように言いました）。

もちろん、DOM イベントを使用するのが最善ですが、IE のおかげでそれができません。

于 2011-04-22T08:16:05.580 に答える