我想獲取的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

上訪問您可以在下面的方式使用event delegation： -

$('.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!">