使用jQuery click函數從使用PHP創建的動態選擇中獲取價值

Question

我有一個PHP，可為表格的每個字段生成一個選擇框。 字段名稱為payment_status。 PHP將從表中拉出字段的值，並將其賦予該選擇的初始值，然后在選擇中給出兩個靜態值，即已付款和未付款，因此用戶可以隨時更改付款狀態，然后按下一個生成的名為change_status的按鈕，jquery函數將獲取payment_status選定的值和隱藏的輸入code_trip並將其發送到PHP文件以更新表中的字段。 參見下面的PHP生成HTML選擇輸入：

$output.='<tr>';
$output.='<input type="hidden" name="code_trip" id="code_trip" value="'.$code_trip.'">';
$output.='<td><b><a href="open_book.php?code_trip='.$code_trip.'">'.$code_trip.'</a></b></td>';
$output.='<td>'.$lastname.', '.$firstname.'</td>';
$output.='<td>('.$qty_traveling.') passenger(s)</td>';
$output.='<td class="status">Status: <b><select name="payment_status" id="payment_status">
            <option value="'.$payment_status.'" selected="selected">'.$payment_status.'</option>
            <option value="paid">paid</option>
            <option value="not paid">not paid</option>
        </select>
        </b><input type="button" name="change_status" id="change_status" value="Save"></td>';
$output.='</tr'>;

現在我有無法正常工作的jQuery函數，應該獲取值

$(document).ready(function(){
  $('.status').on('click', '#change_status', function(){    
    var code_trip = $("#code_trip").val();  
    var new_pay_status = $("#payment_status").val();    
    alert(new_pay_status+" selected for trip: "+code_trip); 
    $.ajax({
      type: "POST",
      url: "save_payment_status.php",
      data: { search_id1: code_trip, search_id2: new_pay_status },
      cache: false,
      success: function(html){
        alert("Payment status has been changed to "+html);
      }
    });     
  });   
});

當我單擊按鈕change_status時，無論我是否單擊另一個生成的字段的按鈕，jquery都僅獲取第一個動態選擇字段，payment_status的值以及第一個動態code_trip的值。

Answer 1

代替

$('.status').on('click', '#change_status', function(){});

采用

$(document).on('click', '#change_status', function(){});

或如果表本身不是動態的，則將此事件偵聽器添加到父表中。 如果創建多個選擇，則生成的選擇ID必須是唯一的。