2

これはおそらく非常に明白なことですが、私はjqueryが初めてなので、何が問題なのかわかりません。

php/jquery/html などを使用して (できるかどうかを確認するために) シンプルなフォーラムを作成しています。最初に開いたときに、フォーラムのリスト (正常に動作) と他のコンテンツの空のボックス (div) が表示されます。リストからフォーラムをクリックすると、showForum(id) が呼び出されてアラートが表示され (動作していることがわかります)、フォーラム内のスレッドのリストが空の div にロードされます (正常に動作します)。問題は、(スレッドをクリックして) スレッドを読み込もうとすると、何も起こらず、アラートも出ないことです。

Jクエリコード:

$(document).ready(function() {
    $('.flink').click(function() {
        var id = $(this).attr('id');
        showForum(id);
        alert("Forum opened");
    });                    

    $('.tlink').click(function() {
        var id = $(this).attr('id');
        showThread(id);
        alert("Thread opened");
    }); 
});

function showForum(id) {
    $('.topic-container').load("showforum.php", {
    'f': +id
    });
    showLinks(id, 1);
}

function showThread(id) {
    $('.entry-container').load("showthread.php", {
    'thread': +id
    });
    showLinks(id, 2);
    alert(id);
}

HTML コード:

<html>
    <head>
        <title>
            Title
        </title>
    </head>
    <body>

        <table class="out-table">
            <tr>
                <td rowspan="6" class="side-menu">
                    <table class="side-header">
                        <?php  // Code to get stuff from DB, flinks are created in here. tlinks are created with more php in showforum.php ?>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="topic-container">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="top-links">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="entry-container">
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

クラス名をチェックして、それらが正しいことを確認しました。フォーラム オープン コール showThread をクリックして (関数が機能していることを確認するためだけに)、正常に機能しました。

誰でもできるどんな助けも大歓迎です。

4

2 に答える 2

2

load using で追加されたコンテンツには、イベント委任が必要ですon。クリック イベントは、DOM に存在する要素にのみ適用されます。そのため、イベントを親 (既に存在する) またはドキュメント要素に添付する必要があるため、後で追加された要素は「委任」によってイベントを利用できるようになります。

.on() を参照してください

サンプルデモ

あなたの場合、後でDOM.tlinkに追加されると推測しています。loadただし、イベントが存在する前にイベントをアタッチして.tlinkいるため、事実上、これらのバインドは無効になります。

$(document).on('click','.flink', function() {
        var id = $(this).attr('id');
        showForum(id);
        alert("Forum opened");
    });                    

    $(document).on('click','.tlink', function() {
        var id = $(this).attr('id');
        showThread(id);
        alert("Thread opened");
    });

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

于 2013-05-10T19:41:46.643 に答える