Question

我在一个表中有一个带有几个输入字段的页面，当某人有人停止输入时，会调用一个函数，该函数应该返回一个新表，其中填充了由输入字段中输入的值过滤的内容

内容页面：

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

标签中的js;

 //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();
}

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

但是在执行一次函数后，从另一页返回值后，在第二次停止输入后它没有做任何事情，尽管新创建的表确实包含了正确的类。

我不知道为什么它似乎无法识别新创建的（相同的）类。

Answer 1

您的jQuery事件仅绑定到处理jQuery时加载的元素，进行了一些更改，因此它绑定到文档，现在也可以使用ajax加载的表单。

编辑修复了下面的代码现在正确

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;
}
});

JQuery不能处理从ajax加载的输入字段

1 个答案: