Javascript不能处理返回的ajax结果

Question

我有一个返回html的ajax调用。这在变化中很有效。什么不工作，虽然是我的javascript做的东西基于点击返回的结果。

ajax调用是:

function update_order_shipping(){
$.ajax({
url: 'ajax_order_shipping.php',
method: "post",
dataType: 'html',
success: function (result) {
$('#shipping-method').html(result);
},
error: function(xhr, status, error) {
//alert(xhr.responseText);
}
});
};

这个效果很好。返回我需要的确切结果。

问题是这些返回的结果也有单选按钮，并在更改时执行以下javascript:

$('input[name="shipping"]').change(function() {
if($(this).is(':checked') && ( $(this).val() == 'freeamount_freeamount' ) ){
document.getElementById('fedex_number').style.display="none";
document.getElementById('ups_number').style.display="none";
document.getElementById('your_shipping_conditions').style.display="none";
var shipping_method = document.getElementById('text-freeamount').innerText;
document.getElementById('text-shipping').innerHTML = shipping_method;
var shipping_value = document.getElementById('value-freeamount').innerText;
document.getElementById('value-shipping').innerHTML = shipping_value;

}
});

现在在初始页面加载时，这工作得很好，但是返回的结果与初始页面加载相同，javascript无法工作。我理解它必须与绑定或类似的东西，但不太确定如何实现它，所以结果将始终使用javascript .

Answer 1

您需要在上使用来将事件绑定到动态创建的元素。

$("body").on("change", "input[name='shipping']", function(event) {   
// stuff here 
});

"body">

任何匹配的事件都将自动侦听更改事件，无论元素是在开始时或之后添加的。