Question

jQuery(function ($) {
    $('input.adud').on('click', function() {
        var thisdiv = $(this).parents('div').attr("id");
        var thisform = $(this).parents('form').attr("id");
        var thistable = $(this).parents('form').attr("class");
        var thisbutton = $(this).attr("id");
        var stuff = new Array();
        stuff = $("#"+thisform+" :input");
        stuff.push({name:"table", value:thistable});
        stuff.push({name:"button", value:thisbutton});

        $.ajax({
            url: "<?php echo site_url('clients/ajax/modifyclients');?>",
            type: 'POST',
            data: stuff,
            success: function(msg) {
                $('#'+thisdiv).html(msg);
            }
        });

        return false;
    });
});

I have a page with many sets of forms. Each set is seperated/identified by a unique div id.

Each set has a form to enter data at the top and underneath are the forms populated with relevant existing data.

I use jQuery and AJAX to enter or update the data into a database. The php AJAX file returns the complete html form set that had been operated on.

The problem is the buttons on the returned html don’t work, in other words the AJAX call can not be made a second time.

I believe I have to use .on() to get around this but I am unable to completely grasp how its done/ or how to set up the jQuery functions.

I know this question has been asked 100 times, but I guess finding the answer that fits your particular problem is the key 🙂

Answer 1

The simplest :

$(document).on('click', 'input.adud', function() {

Better :

Find a persistent element in which all your dynamically added inputs are and do

$(thisElement).on('click', 'input.adud', function() {

When using on, you must apply it on a collection that is yet present and that will still be present later, and provide the selector of the elements (which may appear later) which may be clicked.