Jquery submit does not work after ajax pagination

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.

Thanks!

Main 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>
  • Elliot Sowersby

    I've managed to solve this.

    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.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.