Javascript Ajax不工作：如何为同一页面上的多个文本输入设置相同的Ajax函数

我有一个页面，其中有一个表，行数动态增加，表中的每一行都包含一个输入字段，我想在表中每一行的输入字段中执行ajax。Ajax只在其他服务器上为第一行工作，它没有任何作用

PHP

fees\u recipt\u extra 2.php

---

使用类而不是ID-s。ID是唯一的，只能用于一个输入，而类提供多个标记

<td><input type="text" name="name" class="searchable-input" value="<?php echo $data['full_name'] ?>" id="search"></td>

希望这是你想要的。在另一种情况下，请用更多的解释回答我的评论

改为var name=$'search'。val应该是$this.val。 您应该始终尝试并委派，这样，如果您有动态内容，也可以由脚本执行

$("td").on('keyup', '#search', function(){});

---

首先，避免将同一ID分配给多个元素。name属性也是如此。如果需要，在您的案例中指定类而不是ID。然而，您可以像这样绑定keyup事件，假设表有一个ID，例如使用“tableid”

$(document).ready(function(){
    $("table#tableid td>input:first-child").focus();
    // Search Student Records.
    $('table#tableid td>input[type="text"]').on("keyup", function(){
        var name = $(this).val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                d = d.trim();
                $("#show").html(d);
            }
        });
    });
});

---

这将把keyup和进一步的AJAX事件绑定到表行中的每个输入。

请用最少的可验证的完整示例更新帖子。请尝试放置伪类的属性，如class=search，然后放置选择器$'.search'。键……。重复的ID除了是无效语法外，还会导致jQuery执行中出现问题。您可以改为使用类

<td><input type="text" name="name" class="searchable-input" value="<?php echo $data['full_name'] ?>" id="search"></td>

$(".searchable-input").keyup(function(){ 
     //ajax function here
});

$("td").on('keyup', '#search', function(){});

$(document).ready(function(){
    $("table#tableid td>input:first-child").focus();
    // Search Student Records.
    $('table#tableid td>input[type="text"]').on("keyup", function(){
        var name = $(this).val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                d = d.trim();
                $("#show").html(d);
            }
        });
    });
});