JSFiddle - React, Tailwind, and code Playground

by smith000monday

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
To Reproduce the issue 
<div style="background-color:#F4F4F4;"> Clicking <b>Edit</b> show row data but after loading the table (click reload buttton)  clicking <b>Edit</b> throws error</div>
    
<P><br>
<table id="sample_editable_1">
    <thead>
        <tr>
            <th>Username</th>
            <th>Full Name</th>
            <th>Points</th>
            <th>Notes</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>alex</td>
            <td>Alex Nilson</td>
            <td>1234</td>
            <td>power user</td>
            <td> <a class="edit" href="javascript:;">
										 Edit
									</a>

            </td>
        </tr>
        <tr>
            <td>lisa</td>
            <td>Lisa Wong</td>
            <td>434</td>
            <td>new user</td>
            <td> <a class="edit" href="javascript:;">
										 Edit
									</a>

            </td>
        </tr>
        <tr>
            <td>nick12</td>
            <td>Nick Roberts</td>
            <td>232</td>
            <td>power user</td>
            <td> <a class="edit" href="javascript:;">
										 Edit
									</a>

            </td>
        </tr>
    </tbody>
</table>
<button id="reload">Reload</button>

JavaScript

jQuery(document).ready(function () {
    PageLoad.init();
    TableEditable.init();

});

var PageLoad = function () {

    return {

        //main function to initiate itemReceipt list table
        init: function () {

            $('body').on('click', '#reload', function () {
                //this is where ajax will be added
                ajaxHtml = '<tr bgcolor="#CCFFCC"><td>New</td><td>New</td><td>New</td><td>New</td><td><a class="edit" href="javascript:;">Edit</a></td></tr>'

                ajaxHtml = $.parseHTML(ajaxHtml)
                $('#sample_editable_1 >tbody').replaceWith(ajaxHtml);
            });
        }
    };

}();

var TableEditable = function () {

    return {

        //main function to initiate the module
        init: function () {

            var oTable = $('#sample_editable_1').dataTable();

            $('body').on('click', '#sample_editable_1 a.edit', function (e) {
                e.preventDefault();
                /* Get the row as a parent of the link that was clicked on */
                var nRow = $(this).parents('tr')[0];

                var aData = oTable.fnGetData(nRow);

                alert('Value: ' + aData[0] + ', ' + aData[1] + ', ' + aData[2] + ', ' + aData[3])
            });
        }

    };

}();