加載了ajax請求后，jQuery PreventDefault（）無法正常工作

Question

我正在處理ajax請求，請單擊下一周和上一周。首先看一下圖像。

好吧，下周和上周都有相同的whole-week課程，下面是此表的基本html

<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>

我的ajax請求正在做出如下響應

<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>

我正在用ajax request替換表內容。第一次工作正常。但是在第一次響應后，防止默認值不起作用。

以下是JS代碼

 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);
    });
});

我的Ajax請求和所有其他請求都正常運行，沒有產生任何錯誤。我還嘗試了jQuery('.whole-week')

Answer 1

當您刪除元素然后通過javascript替換它時，它會丟失頁面加載時添加到該元素的所有事件綁定。 因此，您需要在ajax成功之后綁定click事件。 另外，您不需要循環.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);
    });   
}