Question

我使用的ajax分页脚本运行正常 - https://github.com/gbirke/jquery_pagination

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

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

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

代码段：

分页脚本

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

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

Answer 1

由于@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({
            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_<?php the_sub_field('tasks_id'); ?> { color: green !important; }";

document.body.appendChild(css);

感谢。

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

1 个答案: