0

サードパーティのコメント プラグインを使用しており、一部のボタンの内容を変更したいと考えています。これは、 が事前にわかっているボタンの場合は簡単ですidが、[返信] ボタンをクリックするまで表示されないボタンもあります。明確にするために、これらの要素はページの読み込み時には存在しません。それらは、何らかのイベントに続いて DOM に挿入されます。これらの要素については、. の接頭辞しか知りませんid。

私が最初に考えたのは、 を使用し.on、応答コンテナーの子に委任することでしたが、loadイベントがバブルしないため、これは機能しません:

<script>
  $("#container").on("load", 'a[id|="reply-button"]', function(event) { $(this).html("different text");  } );
</script>

<div id="container">
  <a id="reply-button-42das56ds6d78a">some text</a>
</div>

次善の策は何ですか？

4

3 に答える 3

1

「[返信]ボタンをクリックすると表示されることはわかっています。その場合、新しい要素がDOMに挿入され、それらの要素のIDのプレフィックスがどのようになるかがわかります。」

イベントのようなものを使用DOMSubtreeModifiedして、要素がいつ追加されたかを知らせることができますが、それはすべてのブラウザーでサポートされているわけではありません。（実際には非推奨になっています。）

または、クリックハンドラーを[返信]ボタンにアタッチすることもできます。

$(document).ready(function() {
    // initialise plugin here, then:
    $("some selector for the reply button(s)").click(function(e) {
        // setTimeout(function() {        
        $('a[id|="reply-button"]').html("different text");
        // }, 10);
    });
});

jQueryは、複数のイベントハンドラーがバインドされた順序で実行されることを保証しますが、もちろん、これはjQueryで追加されたハンドラーにのみ適用されます。したがって、使用しているサードパーティのコメントプラグインもjQueryを使用している場合は、最初に初期化され、後で独自の応答クリックハンドラーが実行され、その時点でプラグインによって追加された要素にアクセスできることを確認してください。

プラグインがjQueryを使用しない場合、クリックハンドラーが最後に実行されるかどうかわからないため、代わりにsetTimeout上記のコードのコメントを解除します。プラグインイベントの実行時間を与えてからテキストを更新するまで、数ミリ秒待機します。 。

于 2012-08-21T22:51:05.660 に答える
0

DOMミューテーションイベントを探しています。この仕様により、DOMノードが挿入されたり、変更されたりしたときに通知を受け取ることができます。ただし、ブラウザのサポートは実際にはありません...まあ、IEは遅れています（IE> = 9がサポートされています）。それはまた、主要なパフォーマンスの独り占めです。このMDNドキュメントを参照してください。これらの理由から、ここの多くの人々がそれらを使用することを提案するとは思わない。ただし、ここにいくつかのコードがあります。

document.addEventListener("DOMNodeInserted", function(e) {
    if ($(e.target).is('selector matching new elements')) {
        //do what you want with e.target, which is the newly-inserted element
    }
}, false);

代わりにCSSアニメーションイベントをリッスンすることを含むパフォーマンスを向上させるハックがあります：ここ。唯一の問題は、IE9がCSSアニメーションをサポートしていないことです。しかし、私たちは皆、これらのイベントをクロスブラウザーでパフォーマンスの高い方法で使用できる日を待っていると思います。

于 2012-08-21T22:45:38.680 に答える
0

セレクターを使う$('#^=id')

id はプレフィックスです

たとえば、test123 で始まるすべての ID

$('#^=test123')

これは次のような場合に機能します

test1234
test12345
test123fgjfdgj

これが役立つかもしれません: http://oscarotero.com/jquery/

ページの読み込みには jquery イベント リスナーを使用します。

例えば$(document).ready(function(){});

ボタンがクリックされたときにロードされる場合は、..

$('#buttonid').click(function() {//handle click});
于 2012-08-21T22:19:33.300 に答える