ajax分页后，Jquery提交不起作用 [英] Jquery submit does not work after ajax pagination
问题描述
我使用的ajax分页脚本运行正常 - https://github.com/gbirke/jquery_pagination
在第一页上，一切都很好，每个页面上都有提交按钮（多个表单），通过jquery POST将数据发送到数据库。 / p>
但是，jquery帖子仅适用于加载的第一页上的表单/按钮。如果你切换到分页上的另一个页面jquery post / submit按钮不起作用。
任何建议都会非常感激，似乎无法弄明白。
代码段：
分页脚本
< script>
$（document）.ready（function（）{
$（＃Pagination）。trigger（'setPage'，[<？php echo $ member_Program_Week_calc;？>]）;
}）;
< / script>
< script type =text / javascript>
函数pageselectCallback（page_index，jq）{
var new_content = jQuery（'＃hiddenresult div.result：eq（'+ page_index +'）'）。clone（）;
$（'＃Searchresult'）。empty（）。append（new_content）;
返回false;
}
函数initPagination（）{
//计算隐藏内容中的条目
var num_entries = jQuery（'＃hiddenresult div.result'）。length;
//在分页元素内创建内容
$（＃Pagination）。分页（num_entries，{
回调：pageselectCallback，
items_per_page：1 //每个只展示一个项目第$
}）;
}
//当文档准备就绪时，初始化分页
$（文档）.ready（function（）{
initPagination（）;
} ）;
< / script>
ajaxSubmit函数
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃completetask_<？php the_sub_field（'tasks_id'）;？>'）。submit（ajaxSubmit）; / / example
函数ajaxSubmit（）{
$（this）.find（'：submit'）。attr（'disabled'，'disabled'）;
var completetask = jQuery（this）.serialize（）;
jQuery.ajax（{
type：POST，
url：/ wp- admin / admin-ajax.php，
data：completetask，
success：function（data）{
jQuery（＃feedback）。html（data）;
} ，
错误：function（errorThrown）{
alert（errorThrown）;
}
}）;
返回false;
}
} ）;
< / script>
表格代码
< form method =postid =completetask_<？php echo $ task_id;？>>
< input type =hiddenname =program_idid =program_idvalue =<？php echo $ program_id;？>/>
< input type =hiddenname =session_idid =session_idvalue =<？php echo $ session_id;？>/>
< input type =hiddenname =task_idid =task_idvalue =<？php echo $ task_id;？>/>
< input type =hiddenname =actionvalue =completeTask/>
< input class =program_task_submit_no program_task_submit_no_<？php echo $ task_id;？> type =submitvalue =COMPLETE TASK/>
< / form>
由于建议，我设法解决了这个问题来自@charlietfl并进行了一些进一步的研究。
解决方案是事件委托，使用.on（）函数。
使用我的代码，我使用.on函数更改了ajaxSubmit函数代码。
简单示例：
$（document）.on（'submit'，'＃completetask'，function（e）{
// CODE
}）;
我更新的代码：
$（document）.on（'submit'，'＃completetask_<？php the_sub_field（'tasks_id'）;？>'，function（e）{
$（this）.find（'：submit'）。attr（'disabled'，'disabled'）;
var completetask = jQuery（this）.serialize（）;
var css = document.createElement（style）;
css.type =text / css;
css.innerHTML =。program_task_title_<？php the_sub_field（ 'tasks_id'）;？> {color：green！important;};
document.body.appendChild（css）;
jQuery.ajax（{
类型：POST，
url：/ wp-admin / admin-ajax.php，
数据：completetask，
成功：函数（数据）{
jQuery（＃feedback）。html（data）;
}，
error：function（errorThrown）{
alert（errorThrown）;
}
}） ;
返回false;
}）;
我删除了原始的ajaxSubmit功能代码。
使用CSS
我还需要在提交按钮后执行CSS，这样就改变了表单的样式。但是，将页面重置更改为正常。为了解决这个问题，我在脚本中执行了CSS样式。
var css = document.createElement（style）;
css.type =text / css;
css.innerHTML =。program_task_title_<？php the_sub_field（'tasks_id'）;？> {color：green！important;};
document.body.appendChild（css）;
谢谢。
I am using an ajax pagination script which works fine - https://github.com/gbirke/jquery_pagination
On the first page everything works great, there are submit buttons (multiple forms) on each page, which send data to the database via a jquery POST.
However, the jquery post only works for forms/buttons on the first page that is loaded. If you switch to another page on the pagination the jquery post / submit button does not work.
Any suggestions would be much appreciated, can't seem to figure it out.
Code snippets:
Pagination Scripts
<script>
$(document).ready(function() {
$("#Pagination").trigger('setPage', [<?php echo $member_Program_Week_calc; ?>]);
});
</script>
<script type="text/javascript">
function pageselectCallback(page_index, jq){
var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
// count entries inside the hidden content
var num_entries = jQuery('#hiddenresult div.result').length;
// Create content inside pagination element
$("#Pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}
// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});
</script>
ajaxSubmit function
<script type="text/javascript">
$(document).ready(function() {
$('#completetask_<?php the_sub_field('tasks_id'); ?>').submit(ajaxSubmit); // example
function ajaxSubmit(){
$(this).find(':submit').attr('disabled','disabled');
var completetask = jQuery(this).serialize();
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: completetask,
success:function(data){
jQuery("#feedback").html(data);
},
error: function(errorThrown){
alert(errorThrown);
}
});
return false;
}
});
</script>
Form Code
<form method="post" id="completetask_<?php echo $task_id; ?>">
<input type="hidden" name="program_id" id="program_id" value="<?php echo $program_id; ?>"/>
<input type="hidden" name="session_id" id="session_id" value="<?php echo $session_id; ?>"/>
<input type="hidden" name="task_id" id="task_id" value="<?php echo $task_id; ?>"/>
<input type="hidden" name="action" value="completeTask"/>
<input class="program_task_submit_no program_task_submit_no_<?php echo $task_id; ?>" type="submit" value="COMPLETE TASK"/>
</form>
I've managed to solve this thanks to a suggestion from @charlietfl and a little further research.
The solution is event delegation, using the .on() function.
With my code, I changed the ajaxSubmit function code around using the .on function.
Simple Example:
$(document).on('submit', '#completetask', function(e) {
//CODE
});
My Updated Code:
$(document).on('submit', '#completetask_<?php the_sub_field('tasks_id'); ?>', function(e) {
$(this).find(':submit').attr('disabled','disabled');
var completetask = jQuery(this).serialize();
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".program_task_title_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";
document.body.appendChild(css);
jQuery.ajax({
type:"POST",
url: "/wp-admin/admin-ajax.php",
data: completetask,
success:function(data){
jQuery("#feedback").html(data);
},
error: function(errorThrown){
alert(errorThrown);
}
});
return false;
});
I removed the original ajaxSubmit function code.
Working with CSS
I also needed CSS to execute once the button is submit which changed the style of the form. However, changing page reset this back to normal. In order to solve this I executed CSS styling within the script.
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".program_task_title_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";
document.body.appendChild(css);
Thanks.
这篇关于ajax分页后，Jquery提交不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
