Javascript 不适用于返回的 ajax 结果

Question

我有一个 ajax 调用 returns html。这适用于变化。但不起作用的是 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);
      }
      });
 };

这很好用。 Returns 我需要的确切结果。

问题是这些返回的结果也有单选按钮，在更改时我执行此 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;
    
       }
    });

现在在初始页面加载时效果很好，但返回的结果与初始页面加载相同 html，javascript 无法工作。我知道它与绑定或类似的东西有关，但不太确定如何实现它，因此结果将始终使用 javascipt。

Answer 1

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

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

“body”可以替换为您输入的任何 non-dynamic 元素的祖先。

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

Javascript 不适用于返回的 ajax 结果

Javascript does not work on returned ajax results

javascript

ajax