6

私はこれを持っています：

$(document).on("click", ".prev", function(){
    $(this).closest("div").find(".slider").animate({
        "left": "+=450px"
    }, 800, "easeInOutBack");
    return false;
});

これは、新しい要素がDOMに追加されたときに機能しますが、すでにDOMにある要素に対しては機能しません。

私がこれをするとき：

$(".prev").on("click", function(){
    $(this).closest("div").find(".slider").animate({
        "left": "+=450px"
    }, 800, "easeInOutBack");
    return false;
});

DOM内の要素に対しては機能しますが、DOMに追加された新しい要素に対しては機能しません。これを2回記述したり、別の関数を呼び出したりせずに、これを両方で機能させる方法はありますか？

スクリーンショットは次のとおりです。

ショット

それで、これはそれがどのように機能するかについてのより詳細な説明です。

<div id="simple-pevs" style="padding-right: 20px;">
    <?php require_once __DIR__ . "/data/get/PEVSection.php"; ?>
</div>

次に、誰かが別のセクションを追加したい場合は、追加ボタンをクリックして、次のコードを実行します。

    $(".add-another-pev").click(function(){
        $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){
            $("#simple-pevs").append(data);
        });
        pevGroup++;
        return false;
    });

ご覧のとおり、phpにプリロードされたものと同じものを呼び出しています。新しいものはクリックイベントで機能します（そして他の追加のものは追加されます）が、最初のものは機能しません

@ArunPJohny

console.log($(".prev"));新しい要素が追加された後：

[a.prev, a.prev, prevObject: b.fn.b.init[1], context: document, selector: ".prev", jquery: "1.9.1", constructor: function…]
0: a.prev
1: a.prev
context: #document
length: 2
prevObject: b.fn.b.init[1]
selector: ".prev"
__proto__: Object[0]
4

2 に答える 2

2

以下は、Jquery の公式 Web サイトからコピーした内容です。非常に明確に説明できます。 イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。この要素は、Model-View-Controller デザインのビューのコンテナー要素、またはイベント ハンドラーがドキュメント内のすべてのバブリング イベントを監視する必要がある場合はドキュメントのコンテナー要素である可能性があります。document 要素は、他の HTML をロードする前にドキュメントの head で使用できるため、ドキュメントの準備が整うのを待たずに安全にイベントをアタッチできます。

まだ作成されていない子孫要素のイベントを処理できることに加えて、委譲イベントのもう 1 つの利点は、多くの要素を監視する必要がある場合のオーバーヘッドを大幅に削減できることです。tbody に 1,000 行のデータ テーブルで、この例では、ハンドラを 1,000 要素にアタッチします。

$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});

委譲イベント アプローチでは、イベント ハンドラーを 1 つの要素 (tbody) のみにアタッチし、イベントは 1 レベル (クリックされた tr から tbody まで) バブルアップするだけで済みます。

$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});

注: 委任されたイベントは SVG では機能しません。

http://api.jquery.com/on/

于 2013-03-11T04:37:36.027 に答える
-1

いいえ、このような新しい要素を作成する場合は、イベント ハンドラーを再バインドする必要があります。

function bindHandler() {
    $(document).on("click", ".prev", function(){
        $(this).closest("div").find(".slider").animate({
            "left": "+=450px"
        }, 800, "easeInOutBack");
        return false;
    });
}
bindHandler();

$(".add-another-pev").click(function(){
    $.get("./data/get/PEVSection.php?pev="+pevGroup, function(data){
        $("#simple-pevs").append(data);
    });
    pevGroup++;

    bindHandler();
    return false;
});
于 2013-03-11T03:58:51.370 に答える