Tengo una llamada ajax que devuelve html. Esto funciona bien en los cambios. Sin embargo, lo que no funciona es el javascript que tengo que hace cosas en función de los clics en los resultados devueltos.
La llamada ajax es:
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); } }); };Esto funciona bien. Devuelve los resultados exactos que necesito.
El problema es que estos resultados devueltos también tienen botones de opción y, al cambiar, realizo este 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; } });Ahora, en la carga de la página inicial, esto funciona muy bien, pero los resultados devueltos, que son html idénticos a los de la carga de la página inicial, el javascript no funciona. Entiendo que tiene que ver con el enlace o algo así, pero no estoy muy seguro de cómo implementarlo, por lo que los resultados siempre usarán javascipt.
Debe usar on para vincular eventos a elementos creados dinámicamente.
$("body").on("change", "input[name='shipping']", function(event) { // stuff here });"cuerpo" se puede reemplazar con cualquier elemento no dinámico que sea un antepasado de su entrada.
Cualquier evento coincidente escuchará automáticamente el evento de cambio, ya sea que el elemento se haya agregado al principio o más tarde.