使用 jQuery click 函数从 PHP 创建的动态选择中获取值答案

【问题标题】：Using jQuery click function to get value from dynamic select created with PHP使用 jQuery click 函数从 PHP 创建的动态选择中获取值
【发布时间】：2017-09-21 22:41:39
【问题描述】：

我有一个为表格的每个字段生成一个选择框的 PHP。字段名称是 payment_status。 PHP会从表中拉取该字段的值，并将其赋予本次select的初始值，然后在select中给出两个静态值，已支付和未支付，因此用户可以随时更改支付状态，然后按下一个名为 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 的值，无论我是否点击另一个生成字段的按钮。

【问题讨论】：

尝试使用 $(document).on('click','.selector',function(){});每当我通过 php 或 javascript 输出某些内容时，我都会使用它并且它可以工作。如果你想知道为什么我不知道：D
谢谢@Stupid Kid！效果非常好。
很高兴它有帮助：D

标签： javascript php jquery mysqli

【解决方案1】：

代替

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

使用

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

如果表本身不是动态的，则将此事件侦听器添加到父表。 如果您创建多项选择，您生成的选择 ID 必须是唯一的。

【讨论】：