php - jQuery(on change) is not changing the data as i select options

Question

HTML

select box bringing data from database and displaying it in options. Next, data(customer-display.php) is appending inside customer-content and it also holds a hidden div which get displayed on change.

    <div class="form-group">
    
                    
                    <select class="form-control select2" id="customer-select">
                      <option value="" id="">---- Search Customers ----</option>
                      <option value="add-new-customer" id="add-customer-option">---- add customer ----</option>
                      <?php 
                      // user_type = 3, which is customer in user table
                      foreach($dbf->fetchOrder("user", "user_type=3") as $users){ 
                      ?>
                      <option value="<?= $users['full_name'];?>" class="customer-option"><?= $users['full_name'];?></option>
    
                      <?php
                      }?>
                      
                    </select>
    
                  </div>
                  
                  
                  
                  
                  <div id="customer-content">
                    <div id="add-customer-form" style="display: none;">
                      <div class='form-group'>
                        <label for='exampleInputName'>Customer Name</label>
                        <input type='text' class='form-control' value='' name='f_name' placeholder='full name...'>
                      </div>
    
                      <div class='form-group'>
                        <label for='exampleInputEmail'>Email</label>
                        <input type='text' class='form-control' value='' name='c_email' placeholder='enter email...'>
                      </div>
    
                      <div class='form-group'>
                        <label for='exampleInputPhone'>Phone</label>
                        <input type='text' class='form-control' value='' name='c_phone' placeholder='enter phone...'>
                      </div>
    
                      <div class='form-group'>
                        <label for='exampleInputAddress'>Address</label>
                        <input type='text' class='form-control' value='' name='c_address' placeholder='enter phone...'>
                      </div>
                      <div class="form-group">
                        <button class="btn btn-warning" id="add-customer-btn">add customer</button>
                      </div>
                    </div>
    
                  </div>

PHP is bringing data and displaying it through ajax

data from PHP

<?php 
  include_once '../includes/class.Main.php';
  $dbf = new User();

  
  $customer_name = $_POST['customer_name'];
  
  foreach($dbf->fetchOrder("user", "full_name='$customer_name'") as $customers){
    $output = "
        <div id='display-customer-form'>
          <div class='form-group'>
            <label for='exampleInputName'>Customer Name</label>
            <input type='text' class='form-control' value='{$customers['full_name']}' name='fname' placeholder='first name...' disabled>
          </div>

          <div class='form-group'>
            <label for='exampleInputEmail'>Email</label>
            <input type='text' class='form-control' value='{$customers['email']}' name='customer_email' placeholder='enter email...' disabled>
          </div>

          <div class='form-group'>
            <label for='exampleInputPhone'>Phone</label>
            <input type='text' class='form-control' value='{$customers['contact_no']}' name='customer_phone' placeholder='enter phone...' disabled>
          </div>

          <div class='form-group'>
            <label for='exampleInputAddress'>Address</label>
            <input type='text' class='form-control' value='{$customers['full_name']}' name='customer_address' placeholder='enter phone...' disabled>
          </div>
        </div>
        ";
  };
  echo $output;
 

jQuery

 $(document).on('change', '#customer-select', function (e) { 
        e.preventDefault();
        var customer = $(this).val();

        if(customer == 'add-new-customer'){

          $('#display-customer-form').css("display", "none");
          $('#add-customer-form').css("display", "block");

        }else if(customer == ''){

          $('#add-customer-form').css("display", "none");
          $('#display-customer-form').css("display", "none");

        }else if(customer != 'add-new-customer' && customer != ''){
          // $('#add-customer-form').css("display", "none");
          $.ajax({
            method: "POST",
            url: "async/customer-display.php",
            data: {customer_name: customer},
            success: function (data){
              $('#customer-content').html(data);
            }

          });
        }
        
      });

dom is changing as i select customer names. But after name change i can not able to add the hidden form #add-customer-form on changing ---add customer---

Answer 1

等待大神答复