why is jQuery live('click') only working on first page for a specific class with AJAX paging?

I am building a questionnarie that displays two questions at a time.

When i push a radiobutton with the class "MCQRadio" a click handler is fired, but it only works on the first page. The clickhandler for GridRadio works on all pages.

What am i doing wrong?

This is the code:

    <script language="javascript">
    $(document).ready(function()
    {

        $(".page-number").live("click", function()
        {

            var page = parseInt($(this).html());
            var progressbarValue = ((page / $("#NumberOfPages").val()) * 100);
            var catId = $("#CategoryID").val();

            $.ajax(
            {
                url: '@Url.Action("QuestionList")',
                data: {
                    "categoryId": catId,
                    "page": page
                },
                success: function(data)
                {
                    $("#question-list").html(data);
                    $("#progressbar").progressbar("value", progressbarValue);
                    $("#progresstext").html("<p>" + Math.round(progressbarValue) + "% gennemgået</p>");

                }
            });
        });

        $('.MCQRadio').click(function()
        {

            var button = $(this);
            var question_id = button.attr('question-id');
            var mcq_id = button.attr('mcq-id');

            $('#savingquestion').fadeIn();

            $.ajax(
            {
                url: '/SaveSurveyAnswers/SaveMCQAnswer',
                data: {
                    "mcq_id": mcq_id,
                    "question_id": question_id
                },
                success: function(data)
                {
                    button.parent().parent().attr('id', "answered");
                    $('#savingquestion').fadeOut();
                }
            });
        });

        $('.GridRadio').live('click', function()
        {

            var button = $(this);

            var row_id = button.attr('row-id');
            var column_id = button.attr('column-id');
            var question_id = button.attr('question-id');

            $('#savingquestion').fadeIn();

            $.ajax(
            {
                url: '/SaveSurveyAnswers/SaveGridAnswer',
                data: {
                    "row_id": row_id,
                    "column_id": column_id,
                    "question_id": question_id
                },
                success: function(data)
                {

                    // Hvis ActionControlleren returnerer complete,开发者_如何学C betyder det at spørgsmålet er fuldt besvaret.
                    // Hvis dette er tilfældet, skal id på den omringende table og div ændres, således at der kommer
                    // de rigtige farver for besvarede spørgsmål
                    $('#savingquestion').fadeOut();

                    if (data == "complete")
                    {
                        var table = button.closest('table');
                        var div = button.closest('div');

                        if (table.attr('id') != "answeredTable")
                        {
                            table.attr('id', 'answeredTable');
                        }
                        if (div.attr('id') != "answered")
                        {
                            div.attr('id', 'answered');
                        }
                    }
                }
            });

        });

    });

Perhaps because one uses live and the other doesn't?

Change:

$('.MCQRadio').click(function() ...

To:

$('.MCQRadio').live('click', function() ...

The function for the MCQRadio is not a live function, just a normal click function. I am guessing that it should also be a live function.

This

$('.MCQRadio').click(function()

should be

$('.MCQRadio').live('click', function()