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.

Answer 2

I think you have the right idea, just syntax seems a little off to me. I'm winging it here, and somewhat of a jQuery noob, so bear with me if it doesn't work:

Change the second block of code to :

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

I always use alerts() as well to find out if its picking up certain variables. Try putting an alert after you assign a value to pid (i.e.: alert(pid);). If it's blank, you know it's not being assigned properly. If it doesn't show up at all, there is trouble before it.