javascript - 加载ajax请求后jQuery PreventDefault()不起作用
问题描述
好的,下周和上一周都有相同的课程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 请求替换表格内容。第一次它工作正常。但在第一次响应之后,防止默认值不起作用。
下面是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')
解决方案
当您删除一个元素然后替换它(通过 javascript)时,它会丢失在页面加载时添加到它的任何事件绑定。所以需要在ajax成功后绑定click事件。你也不需要循环你的.whole-week
. 绑定点击()
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);
});
}
推荐阅读
- php - 在多种日期范围之间搜索?
- html - 如何使用 Flex 使图像居中?
- javafx - 如何在 FXMLDocumentController 中与我的画布交互
- mysql - 在 wordpress 中使用 wpdb 查询没有结果
- javascript - 如何使用数组(vanilla JS)创建 HTML 表格?
- c# - 在 WPF App 中根据用户名显示用户的 SQL 信息
- javascript - 特定字符的 TypeScript 类型字符串
- java - 在 Java 中创建对象时从孩子的类属性设置类属性
- python - 无法使用 Oauth2.0 对 LinkedIn Python API 客户端进行身份验证
- reactjs - ("node_modules/next/types/index")' 没有兼容的调用签名