1

イベント委任に問題があり、それを理解できません。私がこれまでに書いたコードに基づいて、誰かが正しい方向を指し示すことができますか?

のすべてが#activityajax 経由で読み込まれます。

<div id="activity">
    <table class="activityLog">
        <thead>
            <tr>
                <th class="action">Activity</th>
                <th class="datetime">Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Log in succesful</td>
                <td>15th October 2013 - 6:29 PM</td>
            </tr>
            <tr class="odd">
                <td>Logged out successfully</td>
                <td>14th October 2013 - 10:03 PM</td>
            </tr>
        </tbody>
    </table>
    <ul id="activityPaganation" class="paganation">
        <li><span>1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
</div>

以下は私が使用しているjqueryです。

$(function() {  
// Load Activity
if($("#activity")) {
    $("#activity").load("ajax.php?aid=1");
}

$("#activityPaganation").on("click", "li a", function(e) {
    e.preventDefault();
    var pid = $(this).text();
    alert('1234567');
    /*$.post("ajax.php", {aid:1,page:pid}, function(response) {
        $("#activity").html(response);
        alert(pid);
    });*/
});
});
4

2 に答える 2

2

activity次に、それが変更されていないように見えるので、に委任します。ajax 呼び出しがactivityPaganation再度上書きされるため、そのイベント バインディングは保持されません。

$("#activity").on("click", "li a", function(e) {
    e.preventDefault();
    var pid = $(this).text();
    alert('1234567');
    /*$.post("ajax.php", {aid:1,page:pid}, function(response) {
        $("#activity").html(response);
        alert(pid);
    });*/
});

これがイベント委任の基本原則です。イベントまたはドキュメント ヘッド (最悪の場合) が必要な限り、DOM に存在するコンテナーにイベントをバインドします。その子孫で発生したクリックは親 (イベントをバインドした場所) にバブルアップされ、jquery はセレクターの一致 (on構文でフィルターに指定したセレクター) を探し、そのセレクターから発生した場合はそれを実行します。ハンドラー。

また、現在のイベント登録では、ロードが非同期であるため、最初のイベント登録は機能しないことに注意してください。ロードが完了する前にイベント登録部分が実行されます。

于 2013-10-15T18:35:42.400 に答える