Getting AJAX to process with an AJAX loaded page?

[Jaxel]

I am trying to paginate one of my pages... and with this pagination, I want things loaded with AJAX to prevent refreshes. I have the content I want to reload as follows:

<xen:require js="js/8wayrun/EWRtorneo_ajax.js" />

<div class="eventResults">
    <xen:pagenav link="rankings/event" linkdata="{$event}" page="{$start}" perpage="{$stop}" total="{$count}" />
   
    <--- MY CONTENT --->
</div>

Then my javascript is pretty simple:

XenForo.register('.eventResults .PageNav a', 'XenForo.ResultSelection');

XenForo.ResultSelection = function($link)
{
    $link.click(function(e)
    {
        e.preventDefault();
       
        XenForo.ajax(
            $link.attr('href'),
            {},
            function(ajaxData, textStatus)
            {
                if (XenForo.hasTemplateHtml(ajaxData))
                {
                    new XenForo.ExtLoader(ajaxData, function()
                    {
                        $(ajaxData.templateHtml).xfInsert('replaceAll', '.eventResults', 'xfShow');
                    });
                }
            }
        );
    });
}

As you can see, all the code does is find the links in the pageNav, prevents their default activation, and replaces the entire contents of the "eventResults" div; which includes the page navigation node as well.

The problem I am having with this is, after the page navigation node is replaced, subsequent javascript calls for page navigation no longer function. How do I get the javascript to work on the new html?

You can see this issue here: Final Round XVI | 8WAYRUN.com

 

[Jaxel]

For an addition... I am doing this in XenMedio using the following codes and its working perfectly fine:

<xen:require css="message_simple.css" />
<xen:require js="js/8wayrun/EWRmedio_ajax.js" />

<div id="mediaComments">
    <div class="pageNavLinkGroup primaryContent" id="CommentFeed">
        <div class="linkGroup SelectionCountContainer"></div>
        <xen:pagenav link="media/media/comments" linkdata="{$media}" page="{$start}" perpage="{$stop}" total="{$count}" />
    </div>

    <---- MY CONTENT ---->
</div>

XenForo.register('#CommentFeed div.PageNav a[href]', 'XenForo.CommentFeedLoader');

XenForo.CommentFeedLoader = function($link)
{
    $link.click(function(e)
    {
        e.preventDefault();

        XenForo.ajax(
            $link.attr('href'),
            {},
            function(ajaxData, textStatus)
            {
                if (XenForo.hasTemplateHtml(ajaxData))
                {
                    new XenForo.ExtLoader(ajaxData, function()
                    {
                        $(ajaxData.templateHtml).xfInsert('replaceAll', '#mediaComments', 'xfShow');
                    });
                }
            }
        );
    });
}

This code is almost exactly the same... yet its working fine. Whats the difference? Why is it working in one, and not the other?

 

[Jaxel]

Figured it out...

XenForo.register doesnt seem to work on the outmost div in the new template html. If I put the pagenav container into another nested div, and instead register to that, it works.

XenForo.register('.EventResults .PageNav a', 'XenForo.ResultSelection');

<xen:require css="EWRtorneo.css" />
<xen:require js="js/8wayrun/EWRtorneo_ajax.js" />

<div class="eventResults_{$event.event_id}" id="eventResults">
    <div class="EventResults">
        <xen:pagenav link="rankings/event" linkdata="{$event}" linkparams="{$linkParams}" page="{$start}" perpage="{$stop}" total="{$count}" />
    </div>
   
    <---- MY CONTENT ---->
</div>