ajax分页后，Jquery提交不起作用 | Jquery提交不起作用

本文介绍了ajax分页后，Jquery提交不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用的ajax分页脚本运行正常 -

在第一页上，一切都很好，每个页面上都有提交按钮（多个表单），通过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提交不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！