jjery提交在ajax分页后不起作用

我正在使用一个工作正常的ajax分页脚本 – https://github.com/gbirke/jquery_pagination

在第一页上，一切都很好，每个页面上都有提交按钮（多个表单），通过jquery POST将数据发送到数据库。

但是，jquerypost仅适用于加载的第一页上的表单/按钮。 如果切换到分页上的另一个页面，则jquery post / submit按钮不起作用。

任何建议都会非常感激，似乎无法弄清楚。

代码片段：

分页脚本

 $(document).ready(function() { $("#Pagination").trigger('setPage', []); });   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(); });  

ajaxSubmit函数

  $(document).ready(function() { $('#completetask_').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; } });  

表格代码

 <form method="post" id="completetask_"> <input type="hidden" name="program_id" id="program_id" value=""/> <input type="hidden" name="session_id" id="session_id" value=""/> <input type="hidden" name="task_id" id="task_id" value=""/>  <input class="program_task_submit_no program_task_submit_no_" type="submit" value="COMPLETE TASK"/>  

Answer 1

由于@charlietfl的建议和一些进一步的研究，我设法解决了这个问题。

解决方案是事件委派，使用.on（）函数。

使用我的代码，我使用.on函数更改了ajaxSubmit函数代码。

简单示例：

 $(document).on('submit', '#completetask', function(e) { //CODE }); 

我更新的代码：

 $(document).on('submit', '#completetask_', 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_ { 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; }); 

我删除了原来的ajaxSubmit函数代码。

使用CSS

一旦按钮提交，我也需要CSS来执行，这改变了表单的样式。 但是，将页面重置更改为正常。 为了解决这个问题，我在脚本中执行了CSS样式。

 var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".program_task_title_ { color: green !important; }"; document.body.appendChild(css); 

谢谢。