1

私は困惑しています。

うまく機能するフォームをポップアップするリンクを作成しました。

リンクは次のようになります。

<a class="buttonA right popForm" m="guest">form</a>

ajax の形式では、php ページであり、他のすべての gobbledygook に加えて、
次の 2 つの関連行を引き出します。

<a class="buttonA right closeForm">X</a>
<a class="test">test</a>

jQuery は次のとおりです。

$J(document).ready(function () {
    $J(".popForm").click(function () {
        var t = $J(this).attr("m");
        var id = ($J(this).attr("id") !== undefined ? $J(this).attr("id") : 0);

        $J.ajax({
            beforeSend: function () {
                //console.log(1);
            },
            url: "popForm.php",
            type: 'POST',
            data: ({
                "t": t,
                "id": id
            }),
            success: function (results) {
                $J("#popup").html(results);
                $J("#popup").show();
            }
        });
    });
    $J(".test").on("click", function (e) {
        console.log("e"+e);
        alert('aa');
    });
    $J(".closeForm").on("click", function () {
        alert(333);
    });
});

「X」リンクがフォームを閉じる (または、この場合は 333 で警告する) ことを期待しています
が、リンクが無効になっています。
実際には、両方のリンクが死んでいます。

私は賢いデバッグのアイデアをほとんど使い果たしました

  • 最新のjQueryライブラリを実行しています
  • コードのどこにも preventDefault がありません
4

1 に答える 1

2

次のように使用.on()します。delegated-events approach

$J("#popup").on("click", ".test", function (e) {
    console.log("e"+e);
    alert('aa');
});
$J("#popup").on("click", ".closeForm", function () {
    alert(333);
});

「call popup」ボタン#popupをクリックした時点で、IFは DOM に存在していませんでした。代わりに、他の親要素を使用してください。
#popup

http://api.jquery.com/on/#direct-and-delegated-events

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

jQuery は次のように動作します。

$J("#popup").on(    // Ohh I know this guy it's in the DOModel!
                    // let's see what event bubbling will he listen for...
     "click",       // hihi, I know this event! That event should descend from...
     ".closeForm",  // hm, there's no such fella yet, 
                    // but if one day if I find him...
     function () {  // I'll show him what's a function!!!
          alert(333);
     }
);
于 2013-04-02T22:29:46.020 に答える