Native JavaScript does not handle AJAX responses correctly

Question

Native JavaScript does not handle AJAX responses correctly

I'm facing an issue with my ajax call where the returned HTML works well on changes, but the Javascript that should perform actions based on clicks within the results is not functioning properly.

Here is the ajax call:

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

The ajax call itself works perfectly and returns the required results.

The problem arises with the radio buttons in the returned results. When I try to execute the following JavaScript upon a change event:

    $('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;
    
       }
    });

While this JavaScript works fine on initial page load, it fails to work on the returned results, which contain identical HTML as the initial page load. It seems like a binding issue. Any suggestions on how to implement it so that the JavaScript functions correctly on the returned results?

javascript ajax

Answer 1

Answer №1

To ensure proper event handling for elements created dynamically, remember to utilize the on method.

$("main").on("click", "button[name='submit']", function(event) {   
   // execute code here 
});

The selector "main" can be substituted with any stable element that is higher up in the DOM hierarchy than your target input.

This approach allows events to be captured even if the element was added after the initial loading of the page.

Answer 2

To ensure proper event handling for elements created dynamically, remember to utilize the on method.

$("main").on("click", "button[name='submit']", function(event) {   
   // execute code here 
});

The selector "main" can be substituted with any stable element that is higher up in the DOM hierarchy than your target input.

This approach allows events to be captured even if the element was added after the initial loading of the page.

Native JavaScript does not handle AJAX responses correctly

Answer №1

Similar questions

Issue with Framer Motion Modal: Animation presence fails to function

Guide on verifying the status of a switch toggle using Selenium and C#

Update the content within the Wicket AjaxLink

Choose a selection from dynamically loaded options using AJAX

Guide on accessing text content from a sibling div element using jQuery

Tips for retrieving page source with selenium Remote Control

I'm having trouble grasping the concept of serving gzip-compressed JavaScript and CSS files

Issue with ESlint global installation in macOS root terminal

Having difficulty installing the yarn package from GitHub

Getting variables from different functions in Python can be achieved by using the return

Creating a horizontal scroll effect using jQuery when the widths of the items are not

Load components dynamically and place them in a flexible position based on the context

Tips for implementing code to function across several images in HTML and CSS

Tips for sending values via props to a different component and the common error message: "Consider using the defaultValue or value props instead of setting selected on the <option> element"

What is the best way to load the route calculation dynamically?

Setting a default date dynamically for v-date-picker in the parent component, and then retrieving the updated date from the child component

Create a function that adds a new div element with a one-of-a-kind identification when

Modify the numerical presentation within the provided input text

Strategies for Identifying Errors in NodeJs/Express

Is there a way to cancel pending map tile requests in OpenLayers when the zoom level is altered?