jQuery load()/event delegation Issue

Question

Ok, I've just found out about event delegation, Click Issue: Dynamically Generated Links Not Triggering Click Function my issue here is as follows.

The UL is loaded in via a jQuery load() call.

<ul id="activityPaganation" class="paganation">
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
</ul>

The first piece of jQuery will load in the above UL with paganation links. The second part of jquery gets the paganation page number from the paganation link you click, now the issue:

I can't get the the updated page loaded into #accountActivity once you click on a paganation link, is this a delegation issue or is what I'm trying to do just not possible, are the paganation links not able to see #accountActivity as this is where the inital load is loaded into?!

$(document).ready(function() {
    if($('#accountActivity')) {
       $('#accountActivity').load('ajax.php?id=3');
    }

    $(document).on("click", "#activityPaganation li a", function(e) {
       e.preventDefault();
       var pid = $(this).text();
       $('#accountActivity').load('ajax.php?id=3&value='+pid);
    });
});

Thanks in advance for all help.

Answer 1

$(document).ready(function() {
    if($('#accountActivity')) {
       $('#accountActivity').load('ajax.php?id=3');
    }

    $('#activityPaganation').on("click", "li a", function(e) {
       e.preventDefault();
       var pid = $(this).text();
       $.post('ajax.php',{id:'3',value:pid},function(response) {
            $('#accountActivity').html(response);
       });
    });
});

IF #activityPaganation is not dynamically created.