Ajaxが機能しない：同じページ上の複数のテキスト入力に対して同じAjax関数を設定する方法

Question

私はn個の（動的に増加する）行数のテーブルを持つページを持っています。 、私はテーブルのすべての行の入力フィールドのキーアップでajaxを実行したい。 Ajaxは1行目のためだけに何もしません。代わりに、ID-S、使用クラスの

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は一意であり、1つの入力に対してのみ使用でき、クラスは複数のタグを提供します。

<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を割り当てることを避けます。同様にname属性も同じです。必要に応じて、ケースのIDの代わりにクラスを割り当てます。ただし、これはあなたのテーブルの行の各入力にkeyUpイベント、さらにAJAXのイベントをバインドしなければならない（と仮定すると、テーブルは、例えば「TABLEID」を使用して、IDを持っている）、このよう

$(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イベントをバインドすることができます。