Event Delegation Issue

Question

Having an issue with event delegation, just can't figure it out. Can anyone point in the right direction based of the code I've written so far, am I miles off??

Everything in #activity is loaded via ajax.

<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>

Below is the jquery I'm using.

$(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);
    });*/
});
});

Answer 1

Then delegate it to activity since that is the one that doesnt seem to change. Your ajax call overwrites activityPaganation again so the event binding on that doesn't get persisted.

$("#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);
    });*/
});

Here is the basic principle of event delegation, You bind the event to the container that exists in DOM as long as you need the event or the document head(worst case). Any click happening on its descendants gets bubbled up to the parent (where you bound the event to) which then jquery looks for the selector match (for the selector you provided int he filter in the on syntax) and if it originated from that selector it executes the handler.

Also note that with your current registration of event, the first event registration should not work since load is async, your event registration part executes before load is completed.

Answer 2

To begin with $("#activity") is not a boolean value. It's a jQuery selector, so use .length() to check for its existence. Explanation: if length is 0 then false, everything else is true

if($("#activity").length) {
    $("#activity").load("ajax.php?aid=1");
}

Coming to your question, #activityPagation is dynamically loaded, hence you cannot use .on() based off of that selector. You might need something which is not loaded via ajax.

$("#activityPaganation").on("click", "li a", function(e) //doesn't work

replace with

$("#activity").on("click", "li a", function(e) //works

(or) if #activity is ajax too, look for any other outer container which is static, (or) as a last resort, although bad performance

$("document").on("click", "li a", function(e)