JQuery doesn't work on input field thats loaded from ajax

Question

I've got a page with a couple of input fields in a table, where when somebody somebody stops typing, a function gets called which should return a new table filled with content filtered by the value put in the input fields.

The content page:

 <form id="formFrm1" method="post">
                <div class="frm-table-overflow stg-att-overview1">
                    <table class="frm-sg-table">
                        <tr>
                            <td></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput11" style="width:100% !important;" type="text" size="2"></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput12" style="width:100% !important;" type="text" size="2"></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput13" style="width:100% !important;" type="text" size="2"></td>
                            <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput14" style="width:100% !important;" type="text" size="2"></td>
                        </tr>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Naam</th>
                            <th>Team</th>
                            <th>Ticket</th>
                        </tr>
                        <?php
                        foreach($cleanAttendeeArray as $arKey => $arVal){

                            $ticketName = array_column($eventsCollection, $arVal["Ticket"]);
                            echo
                            "<tr>
                                <td>
                                    <input type='checkbox' name='selectedAttendeeID[]' value='" . $arVal["ID"] . "'>
                                </td>
                                <td>
                                    " . $arVal["ID"] . "
                                </td>
                                <td>
                                    " . $arVal["Name"] . "
                                </td>
                                <td>
                                    " . $arVal["Team"] . "
                                </td>
                                <td>
                                    " . $ticketName[0] . "
                                </td>
                            </tr>"
                            ;
                        }
                        ?>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Naam</th>
                            <th>Team</th>
                            <th>Ticket</th>
                        </tr>
                    </table>
                </div>
                <br>
                <span>Selecteer een startgroep om de geselecteerde deelnemers aan te koppelen</span>
                <select name="frm-sg-selectedsg">
                    <option value="-1" selected>Selecteer startgroep...</option>
                <?php
                foreach($startgroupResultsArray as $sgKey => $sgVal){
                    echo"<option value=" . $sgVal['StartGroupId'] . ">" . $sgVal['Name'] . "</option>";
                }
                ?>
                </select>
                <br><br>
                <button type="submit" name="frm-sg-submit-addtogroup">Toevoegen</button>
            </form>

The js in tags;

 //setup before functions
var typingTimer1;                //timer identifier
var doneTypingInterval1 = 500;  //time in ms
var $input1 = jQuery('.myFrmInput1');

//on keyup, start the countdown
$input1.on('keyup', function () {
  clearTimeout(typingTimer1);
  typingTimer1 = setTimeout(doneTyping1, doneTypingInterval1);
});

//on keydown, clear the countdown 
$input1.on('keydown', function () {
  clearTimeout(typingTimer1);
});

jQuery("#formFrm1").on("keypress", function (e) {
if (e.keyCode == 13) {
    return false;
}
});
//user is "finished typing," do something
function doneTyping1 () {
        var frmInput11 = document.getElementsByClassName("myFrmInput11")[0].value;
        var frmInput12 = document.getElementsByClassName("myFrmInput12")[0].value;
        var frmInput13 = document.getElementsByClassName("myFrmInput13")[0].value;
        var frmInput14 = document.getElementsByClassName("myFrmInput14")[0].value;
    //jQuery.ajax({url: "/../wp-content/plugins/Farmstacle-run-manager/ajax/managersearch.php?frm11="+frmInput11+"&frm12="+frmInput12+"&frm13="+frmInput13+"&frm14="+frmInput14, success: function(result){
        //jQuery(".stg-att-overview1").html(result);
    //}});
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementsByClassName("stg-att-overview1")[0].innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","/../wp-content/plugins/Farmstacle-run-manager/ajax/managersearch.php?frm11="+frmInput11+"&frm12="+frmInput12+"&frm13="+frmInput13+"&frm14="+frmInput14,true);
        xmlhttp.send();
}

The page called with Ajax:

<table class="frm-sg-table">
<tr>
    <td></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput11" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm11."'"; ?>></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput12" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm12."'"; ?>></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput13" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm13."'"; ?>></td>
    <td style="padding: 1px;"><input class="myFrmInput1 myFrmInput14" style="width:100% !important;" type="text" size="2" <?php echo "value='".$frm14."'"; ?>></td>
</tr>
<tr>
    <th></th>
    <th>ID</th>
    <th>Naam</th>
    <th>Team</th>
    <th>Ticket</th>
</tr>
<tr>
    <th></th>
    <th>ID</th>
    <th>Naam</th>
    <th>Team</th>
    <th>Ticket</th>
</tr>

But after executing the function once, returning the value from the other page, it doesn't do anything after the second time I stop typing, though the newly created table does contain the correct classes.

I have no clue to why it doesn't seem to recognize the newly created (identical) classes.

Answer 1

Your jQuery event is only bound to the elements loaded when the jQuery is handled, made some changes so it bound to the document and now also works with ajax loaded forms.

Edit fixed the code below order is now correct

var $input1 = jQuery('.myFrmInput1');

//on keyup, start the countdown
$('document').on('keyup', '.myFrmInput1', function () {
  clearTimeout(typingTimer1);
  typingTimer1 = setTimeout(doneTyping1, doneTypingInterval1);
});

//on keydown, clear the countdown 
$('document').on('keydown', '.myFrmInput1', function () {
  clearTimeout(typingTimer1);
});

jQuery("document").on("keypress", '#formFrm1', function (e) {
if (e.keyCode == 13) {
    return false;
}
});