MVC4 Ajax enabled WebGrid Jquery dialog not working when paging

Question

I have an Ajax enabled WebGrid and inside this grid I have a column which generates an ActionLink, this ActionLink has a "class" added so I can catch it with jQuery and open a Dialog based on the URL passed -> this URL is a call to a method which returns a PartialView.

This is working for all buttons on first page, as soon as I change the paging the script is not called and my partial view is displayed without a layout. So the action is executed but not through javascript (where I put return false; so I don't get double postbacks).

Code:

    @Code
    Dim grid As New WebGrid(Model,
          rowsPerPage:=10,
          canSort:=True,
          canPage:=True,
          ajaxUpdateContainerId:="ajaxGridClientBookingWL",
          fieldNamePrefix:="ajaxGridClientBookingWL",
          pageFieldName:="ajaxGridClientBookingWL")
    End Code
<div id="ajaxGridClientBookingWL">

<script type="text/javascript">
    $(document).ready(function () {

        $(".popup-button").click(function () {
            //debugger;
            var href = $(".popup-button").attr('href');
            InitializeDialog($("#modPop"), href);

            $("#modPop").dialog("open");

            return false;

        });

        function InitializeDialog($element, href) {

            $element.dialog({
                autoOpen: false,
                width: 400,
                resizable: true,
                draggable: true,
                title: "Department Operation",
                modal: true,
                closeText: '[Zapri]',
                dialogClass: 'no-close normalpopup-dialog',
                closeOnEscape: true,
                open: function (event, ui) {
                    $element.load(href);
                },

                close: function () {
                    $(this).dialog('close');
                }

            });

        }
    });
</script>

<div id="modPop">
</div>

    <table cellpadding="3px">
        <tr>
            <td>@grid.GetHtml(tableStyle:="gridTable", headerStyle:="gridHeader", rowStyle:="gridRowStyle", alternatingRowStyle:="gridAlternatingRow",
 columns:=grid.Columns(
 grid.Column(header:="Datum", columnName:="DateInserted", canSort:=True, format:=@@<text>@NiRISHelpers.SpanDateToShort(item.DateInserted)</text>),
 grid.Column(header:="", format:=@@<text>@Html.ActionLink("Izberi", "KomitentBookingWLPreveril", "Pregled", New With {.area = "Komitent", .ID = item.IDrec}, New With {.class = "popup-button"})</text>)
 ))</td>
        </tr>
    </table>
</div>

You can see I set a debugger which catches my action if on first page, it does not when I page this grid.

I put everything inside the div which is designated as ajaxUpdateContainerId, tried to put it outside of it but nothing seems to work.

The partial view is just a simple @Html.DisplayFor(....).

Edit - solution:

As per @JoeJoe87577 accepted answer below, here is my new code (the rest is the same as above only scripts and grid.column are changed):

<script type="text/javascript">

    function readyTheButton() {

        var href = $(".popup-button").attr('href');
        InitializeDialog($("#modPop"), href);

        $("#modPop").dialog("open");

        return false;
    }

    function InitializeDialog($element, href) {

        $element.dialog({
            autoOpen: false,
            width: 400,
            resizable: true,
            draggable: true,
            title: "Department Operation",
            modal: true,
            closeText: '[Zapri]',
            dialogClass: 'no-close normalpopup-dialog',
            closeOnEscape: true,
            open: function (event, ui) {
                $element.load(href);
            },

            close: function () {
                $(this).dialog('close');
            }

        });
    }
    </script>

And the grid.Column:

grid.Column(
  header:="", 
  format:=@@<text>@Ajax.ActionLink(
      "Izberi", 
      "KomitentBookingWLPreveril", 
      "Pregled", 
      New With {.area = "Komitent", .ID = item.IDrec}, 
      New AjaxOptions With {
        .HttpMethod = "GET", 
        .InsertionMode = InsertionMode.Replace, 
        .UpdateTargetId = "modPop", 
        .OnBegin = "readyTheButton()"})</text>)

Answer 1

Pretty simple, the $(document).ready(function () { }); event is only fired when the page is loaded and everything is ready. But when you page the grid, all the buttons are reloaded by ajax and non of them has the click event attached.

1fst Solution: Look in the documentation for the paging event of your grid (usually every grid has such an event), attach the click event to your actionlinks everytime the grid has changed the page.

2nd Solution: Apply an onclick attribute to your actionlinks on the server, this onclick can lead to your InitializeDialog function.

(Edit) Addition: You could try not to use a javascript event handler, but the built in Ajax Actionlink. This will keep your page clean and you don't have to deal with javascript event handling.