Fancybox ajax加载的内容“Onclick脚本”在每个fancybox加载上执行多次

Question

Using fancybox to load ajax content(html/javascript) in popup

On the first click, ajax loaded js function in popup are working fine(single call).
On the second click, ajax loaded js function are called twice in popup.
On the third click, ajax loaded javascript function are called thrice and So on..

I check the javascript function by alert. It throws alert that many times equal to fancybox loaded on each click. I dont know why it is behave like that. I think i need to clear the previously loaded content in the fancybox.

$(".various").fancybox({
            modal           : false,
            showCloseButton : true,
            helpers         : {
                                overlay: {
                                    css: {
                                        'background': 'rgba(58, 42, 45, 0.3)'
                                    }
                                }
                              },
            closeBtn        : true,
            closeClick      : false,
            maxWidth        : 1200,
            maxHeight       : 850,
            fitToView       : false,
            width           : '85%',
            height          : '85%',
            autoSize        : false,
            openEffect      : 'none',
            closeEffect     : 'none'
        });

Above the code i have used to call the fancybox ajax call on click a>href LINK TO "POPUP.HTML". Everything loads fine, except the javascript alert on fancybox popup window.

POPUP.HTML

    <table class="table table-striped table-bordered table-hover" id="popupGridTable">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd gradeX" id="row1">
                <td>Trident</td>
                <td>Internet Explorer 4.0</td>
                <td>Win 95+</td>
                <td class="center">4</td>
                <td class="center">X</td>
            </tr>
            <tr class="even gradeC" id="row2">
                <td>Trident</td>
                <td>Internet Explorer 5.0</td>
                <td>Win 95+</td>
                <td class="center">5</td>
                <td class="center">C</td>
            </tr>
            <tr class="odd gradeA" id="row3">
                <td>Trident</td>
                <td>Internet Explorer 5.5</td>
                <td>Win 95+</td>
                <td class="center">5.5</td>
                <td class="center">A</td>
            </tr>
            <tr class="even gradeA" id="row4">
                <td>Trident</td>
                <td>Internet Explorer 6</td>
                <td>Win 98+</td>
                <td class="center">6</td>
                <td class="center">A</td>
            </tr>
        </tbody>
    </table>
<!-- ONCLICK ON TBODY > TR CALLS THE JS FUNCTION THAT MANY TIMES EQUAL TO FANCYBOX POPUP -->
    <script type="text/javascript">
        $(document).ready(function(){
            var table = $('#popupGridTable').DataTable();
            $('body').on("click", '#popupGridTable tbody tr' ,function () {
                //alert('called that many times equal to number of click on fancybox popup');
                var id = $(this).attr('id');
                $('#popupGridTable tbody tr').removeClass('row_selected');
                $(this).addClass('row_selected');
                parent.setInformation(id);
                return;
            });
        });
    </script>

I have used afterClose call to clear the html content. But still facing the same issue.

Please help me sort out this issue.

Thanks in advance