0

I have an ajax call that returns html. This works well on changes. What does not work though is the javascript I have that does stuff based on clicks in the returned results.

The ajax call is:

    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);
      }
      });
 };

This works well. Returns the exact results I need.

The issue is that these returned results also have radio buttons and on change I perform this 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;
    
       }
    });

Now on initial page load this works great, but the returned results which is identical html as the intial page load, the javascript fails to work. I understand it has to do with binding or something like that, but not quite sure how to implement it, so that results will always use the javascipt.

Peter
  • 51
  • 7
  • You need to re-run your input event to work with the new content. Try to embed your input change event in a function. Load this function on initial page load and on your ajax response too. – Alex May 23 '22 at 17:20

1 Answers1

1

You need to use on to bind events to dynamically created elements.

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

"body" can be replaced with any non-dynamic element that's an ancestor of your input.

Any matching events will automatically listen for the change event, whether the element was added at the start or later.

user984003
  • 28,050
  • 64
  • 189
  • 285
  • So bascially change this line $('input[name="shipping"]').change(function() { to $("body").on("change", "input[name="shipping"]", function(event) { ?? – Peter May 23 '22 at 17:26
  • Yes, that should work. – user984003 May 23 '22 at 17:28
  • No, trying it, does not work – Peter May 23 '22 at 17:29
  • Try just putting an alert() in there, make sure it isn't something else that's the issue. Double-check that the returned HTM has the right class name, etc. – user984003 May 23 '22 at 17:31
  • I know the second JavaScript code works well, and checked via console.log the returned results. I know I am returning the correct results, as it is always the same results being loaded (from initial page load to subsequent ajax loads). – Peter May 23 '22 at 17:33
  • Does the "on" code work on the initial HTML? – user984003 May 23 '22 at 17:37
  • Yes, I used your adaptation and on initial page load works exactly as before. With the returned results, the page does not update, as it would with button clicks. – Peter May 23 '22 at 17:39
  • Are you using "body" or another static element? I don't know what else to tell you without seeing the actual code and returned HTML. You can see what people are saying here https://stackoverflow.com/questions/12065329/adding-event-listeners-to-dynamically-added-elements-using-jquery. I successfully use on with change events. – user984003 May 23 '22 at 17:42
  • – Peter May 23 '22 at 17:44
  • The $cart_shipping results never change in that they return the same results other then the shipping values. I use this same file for both initial page load and ajax calls. – Peter May 23 '22 at 17:46