jQuery PreventDefault() not working after ajax request loaded

Question

I am working with ajax request on clicking next and previous week.Take a look at the image first.

Okay here both next week and Prev week has same class whole-week and Below is the basic html of this table

<table class="sevent-weekly-view">
<thead>
    <tr>
        <td>
            <a class="whole-week" href="" data-week="24" data-year="2018">Prev Week</a>
        </td>
        ...
        <td>Tue<br><span class="weekly-date">19</span></td>
        ...
        <td>
            <a href="" class="whole-week" data-week="26" data-year="2018">Next Week</a>
        </td>
    </tr>
</thead>
</table>

My ajax request is making response like below

<thead>
    <tr>
        <td>
            <a class="whole-week" href="" data-week="24" data-year="2018">Prev Week</a>
        </td>
        ...
        <td>Tue<br><span class="weekly-date">25</span></td>
        ...
        <td>
            <a href="" class="whole-week" data-week="26" data-year="2018">Next Week</a>
        </td>
    </tr>
</thead>

And i am replacing table content with ajax request.First time it works fine.But after first response Prevent default is not working.

Below is JS codes

 var _getweekevents = function(week, year){
 var table = jQuery('.sevent-weekly-view');
    jQuery.ajax({
        type: 'post',
        url: seventdata.ajaxurl,
        data:{
            action: 'sevent_weekly_posts',
            week : week,
            year: year,
        },
        beforeSend: function(){},
        success: function(request){
            table.html(request.table);
        },
    });
}

var weekly = jQuery(document).find('.whole-week');

weekly.each(function(index){
    jQuery(this).on('click', function(e){
        e.preventDefault();
        var week = jQuery(this).data('week');
        var year = jQuery(this).data('year');
        _getweekevents(week, year);
    });
});

My Ajax Request And All other requests are working fine without producing any error.I also tried jQuery('.whole-week')

Answer 1

When you remove an element and then replace it (via javascript), it loses any event bindings that were added to it on page load. So you need to bind click event after ajax success. Also you don't need to loop your .whole-week . bindClick()

var _getweekevents = function(week, year){
var table = jQuery('.sevent-weekly-view');
    jQuery.ajax({
        type: 'post',
        url: seventdata.ajaxurl,
        data:{
            action: 'sevent_weekly_posts',
            week : week,
            year: year,
        },
        beforeSend: function(){},
        success: function(request){
            table.html(request.table);
        },
    });
}

function bindClick() {
    $('.sevent-weekly-view').on('click', '.whole-week', function(e){
        e.preventDefault();
        var week = jQuery(this).data('week');
        var year = jQuery(this).data('year');
        _getweekevents(week, year);
    });   
}