我想获取jquery动态单选按钮字段的值。

Question

这是代码

<table class="table">
  <tbody>
    <tr>
      <td></td>
      <td>Destination</td>
      <td>Service Charges</td>
      <td>Time Frame</td>
    </tr>
    <tr class="uk">
      <td><input checked="checked" type="radio" name="shiping-method" id="shipping-method" value="1"></td>
      <td>uk</td>
      <td>free</td>
      <td>2-4 working days</td>
    </tr>
    <tr class="uk">
      <td><input type="radio" name="shiping-method" id="shipping-method" value="3"></td>
      <td>uk</td>
      <td>6.00</td>
      <td>next working day</td>
    </tr>
  </tbody>
</table>

在我试图使用以下代码的主页上无法访问这些值

$('input[type="radio"]').on('click',function(){
   var value = $(this).val();
   alert($(this).val());
});

Answer 1

您可以通过以下方式使用事件委托：

$('.table').on('click','input[type="radio"]',function(){ 
   var value = $(this).val(); 
   alert($(this).val()); 
});

工作实例：-

​

$('.table').on('click','input[type="radio"]',function(){
      var value = $(this).val();
     alert($(this).val());

});

$('.clickMe').click(function(){
$("<tr class='uk'><td><input checked='checked' type='radio' name='shiping-method' id='shipping-method' value='1'></td><td>uk</td><td>free</td><td>2-4 working days</td></tr><tr class='uk'><td><input type='radio' name='shiping-method' id='shipping-method' value='3'></td><td>uk</td><td>6.00</td><td>next working day</td></tr>").insertAfter($('.table tbody tr'));

});

table {
    width: 100%;
}

tr {
    height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td>Check</td>
      <td>Destination</td>
      <td>Service Charges</td>
      <td>Time Frame</td>
    </tr>
  </tbody>
</table>
<br>
<input type="button" class="clickMe" value="ClickMe!">

​