13

私のアプリケーションは、$(document).ready が呼び出された後にいくつかの要素を DOM に追加します。jQuery 1.9.0 を使用しています

次の例は機能します。

$(document).on("click", "#box-descr", function(evt) {
    console.log("I showed up");
});

ただし、要素が画面に表示されたときにその関数を実行したいです。ここでこの目的のイベントを確認できませんでしたhttp://api.jquery.com/category/events/

基本的にこれは単一ページのアプリケーションであるため、ドキュメントの準備ができていると呼び出されるのは 1 回だけですが、ユーザーが UI を操作すると、要素が画面に出入りします。

4

3 に答える 3

10

イベントは便利ですが、外観に関するネイティブ イベントがないため、イベントを手動でトリガーできるように、アイテムがいつ追加されたかを知る必要があります。ポーリングを使用して、何かの出現をテストし、出現したときにアクションを実行できます。これは、ユーザー入力、ajax、またはその他のプログラムなど、制御外に追加されたコンテンツに最適です。

setInterval(function() {
    $('.my-element-class:not(.appeared)')
        .addClass('appeared')
        .each(function() {
            console.log("here I am!")
        });
}, 250);

これにより、クラス名 (または指定したその他のセレクター基準) によって要素の外観が毎秒 4 回チェックされ、新しい項目が表示されたときにコードが実行されます。アイテムが表示されると、そのインスタンスが再び検出されるのを防ぐために .appeared クラスが追加されます。1 つの外観のみをテストする場合は、このように単純化し、検出後にポーリングを終了できます。

var testAppearTmr = setInterval(function() {
    if ($('.my-element-class').length) {
        clearInterval(testAppearTmr);
        console.log("here I am!")
    }
}, 250);

jQuery表示プラグインはこれらの手法に基づいて構築されており、項目がビュー領域にあるかどうかのテストなど、さらに多くのオプションがありますが、DOM に追加されているいくつかの項目をテストするだけであれば、上記のコードは次のようになります。プラグインよりもはるかに倹約的です。

于 2015-07-14T17:05:05.940 に答える
1

対象の要素がDOMに追加されたときにイベントをトリガーできるかどうかを尋ねていると思います。これがあなたの望むものではない場合はお知らせください。

$(document).on('click', '#box-descr', function(evt) {
    console.log("I showed up");
});

// Later in your code you add the element to the DOM
$('<div />', { id : 'box-descr' }).appendTo('body');

// Then trigger the click event for the added element 
$('#box-descr').trigger('click');

それがあなたが探しているものであることを願っています

これを短くすることができます

$('<div />', { id : 'box-descr' }).appendTo('body').trigger('click');
于 2013-04-05T08:37:43.463 に答える