[jQuery] Re: jquery ajax-built page with embedded ajax code issue

[brian]

On Fri, Dec 12, 2008 at 2:24 PM, ray <rayjohnterr...@gmail.com> wrote:
>
> could you show me an example of what you mean here by this, either
> using the code above or another example?  That sounds like the
> 'correct' way to do it.
>
>     [ set the click handler to be a separate function and ensure that
> any new links also get the click handler attached (in your success
> block) ]
>

Something along these lines:

$('.ajax_link').click(my_click);

function my_click()
{
        clicked_link_id = $(this).attr("id");
        $.ajax({
                dataType: "text",
                type: "POST",
                url: "ajax.php",
                data: "a=" + clicked_link_id,
                success: function (msg, status)
                {
                        $("#maintext").fadeOut("slow", function()
                        {
                                $(this).html(msg)
                                        .children('.ajax_link')
                                        .click(my_click).end()
                                        .fadeIn("slow");
                        });
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Error:");
                }
        });
        return false;
}

The click handler is no longer an anonymous function and so click() is
given the name only. This will allow you to run click(my_click) on any
new links added to the page when the successfunction runs.

Though it's not necessary, you could also do the same with the success function:

success: mysuccess,
...


function my_success(msg, status)
{
        $("#maintext").fadeOut("slow", function()
                {
                        $(this).html(msg)
                                .children('.ajax_link')
                                .click(my_click).end()
                                .fadeIn("slow");
                });
}



Note that I've also changed your success function. You don't need
document.getElementById as you can get at it with jQuery(). Also, I've
used $(this) in the callback instead of looking for #maintext again.
And I've chained the functions together. The end() is there so that
fadeIn() applies to #maintext and not the links.