Ajax 不起作用:如何为同一页面上的多个文本输入设置相同的 ajax 函数

Question

我有一个页面，其中我有一个有n(动态递增(行数的表，表的每一行都包含一个输入字段，我想在表中每一行的输入字段中执行ajax。阿贾克斯只在第一排工作，它没有给其他人。

.PHP

<?php  $count=rowCount(); // UDF Returning no of rows
        for($i=1;$i<=10;$++){
?>
<tr>
    <td><input type="text" name="name" id="search" /></td>
</tr>
<?php 
}
?>

.JS

$(document).ready(function(){
    $( "#search" ).focus();
    // Search Studnet Records.
    $("#search").keyup(function(){
        var name = $("#search").val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                $("#show").html(d);
            }
        });
    });
});

fees_recipt_extra2.php

if (isset($_POST['display'])) 
{
    $name = mysqli_real_escape_string($conn,$_POST['name']);
        if($name)
        {
            $query = mysqli_query($conn,"SELECT * FROM students WHERE name  LIKE '%$name%' OR fathers_name  LIKE '%$name%' OR surname  LIKE '%$name%' OR id  LIKE '%$name%' LIMIT 10");
            if(mysqli_num_rows($query))
            {
                    echo"<table class='table table-hover tb1'>";
                        echo"<tr class='danger'>";
                            echo"<td >IMAGE</td>";
                            echo"<td >ID</td>";
                            echo"<td >DEPT</td>";
                            echo"<td >COURSE</td>";
                            echo"<td >NAME</td>";
                            echo"<td >F-NAME</td>";
                            echo"<td >SURNAME</td>";
                            echo"<td >Action</td>";
                        echo"</tr>";    
                while($data=mysqli_fetch_assoc($query))
                {           
                            $id=$data['id'];
                            $img=$data['image'];
                            if($id==find_id_in_feesreceipt_temp_table($id))
                            {
                                continue;
                            }
                        echo"<tr class='clickable-row' data-href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id'>";
                            echo"<td cellpadding='0'> <img src='Assests/profile_images/$img' width='50'></td>";
                            echo"<td >". $data['id']            ."</td>";
                            echo"<td >". $data['dept']          ."</td>";
                            echo"<td >". $data['course']        ."</td>";
                            echo"<td >". $data['name']          ."</td>";
                            echo"<td >". $data['fathers_name']  ."</td>";
                            echo"<td >". $data['surname']       ."</td>";
                            echo"<td ><a href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id' class='btn btn-primary btn-xs'>Append</a> </td>";
                        echo"</tr>";
                }
                    echo"</table>";

Answer 1

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

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

在jQuery中，将ajax函数分配给这个类。

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

希望这是你要求的。在其他情况下，请回复我的评论并提供更多解释。

Answer 2

而不是var name = $('#search').val() should be $(this).val() .并且您应该始终尝试委派，这样，如果您有动态内容也可以由脚本执行。

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

Answer 3

首先，避免将相同的ID分配给多个元素。名称属性也是如此。如果需要，在您的情况下分配类而不是 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);
            }
        });
    });
});

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