Click event only works on the first page when combined with jquery datatables, while the other pages do not work

Question

Kinda hard to explain the problem, hopefully you can understand what I mean.

I have 1000 more data displayed by jquery datatables with this plugin pagination will automatically be created. In every line I add a css class so I could use for each row of data. Through this css class I use to call a javascript action as a dialogue. The problem, in the first page all goes well, but in the second to the last page I could not access the javascript action, dialogue does not appear, I check in console.log not indicate anything problematic.

This is my code :

HTML

<div id="dialog" title="Select one"></div>

PHP

foreach ($datafromDb as $data) {
    $datakey = '{"dataCode":"'.$data['dataCode'].'"}';
    echo "<td><a href='#' class='cssClass' data-key='" . $datakey . "'>Click</a></td>";
}

Javascript

$(document).ready(function () {
   // implement jquery dataTables
   $('#table').DataTable({
        bAutoWidth: false,
        stateSave: true
   });

   // this action executed when cssClass accessed
   $(".cssClass").click(function () {
        var self = this;

        $("#dialog").dialog({
            resizable: false,
            show: {
                effect: "bounce",
                duration: 500
            },
            hide: {
                effect: "explode",
                duration: 500
            },
            height: 100,
            modal: true,
            buttons: {
                "Button 1": function () {
                    var data = $(self).data('key');
                    window.open("http://www.example.com/" + "firstRoute" + "/" + data.dataCode, "_blank");
                },
                "Button 2": function () {
                    var data = $(self).data('key');
                    window.open("http://www.example.com/" + "secondRoute" + "/" + data.dataCode, "_blank");
                }
            }
        });
    });
}

Answer 1

Alternatively you could add the event listener to the table itself:

$('#table').on("click", ".cssClass", function(){
    var self = this;
    $("#dialog").dialog({
        resizable: false,
        show: {
            effect: "bounce",
            duration: 500
        },
        hide: {
            effect: "explode",
            duration: 500
        },
        height: 100,
        modal: true,
        buttons: {
            "Button 1": function () {
                var data = $(self).data('key');
                window.open("http://www.example.com/" + "firstRoute" + "/" + data.dataCode, "_blank");
            },
            "Button 2": function () {
                var data = $(self).data('key');
                window.open("http://www.example.com/" + "secondRoute" + "/" + data.dataCode, "_blank");
            }
        }
    });
});

The cssClass class is only available to jQuery on the first page, subsequent cells are not yet in the DOM so will not have the event listener attached. Hope that helps.