title: Ajax requests are failing to send after an initial ajax request is made - trying to figure out what is causing a conflict
body: <p>I have a form with multiple types of ajax calls.
  - general form update that saves all input fields
  - per-field uploads
  - per-upload deletion</p>
  
  <p>The per-field and per-upload ajax calls are targeted by the class name of the button that is clicked. So there are only 3 scripts in the page. </p>
  
  <p>Each of the scripts work. When the page loads fresh, I can complete any of the form update, field upload, or upload deletion actions.</p>
  
  <p>However, after I have completed an initial action, subsequent actions don't work.</p>
  
  <p>Example:</p>
  
  <p>If I click the "save" button to update the form, this causes the per-field upload and per-upload deletion buttons not to work.</p>
  
  <p>If I click the "per-field" upload, the upload works, but then I'm not able to delete anything.</p>
  
  <p>If I click a "per-upload" delete button, I can no longer upload anything.</p>
  
  <p>But in each case, I am still able to click "save" to update the form.</p>
  
  <h1>Here's a visual of how the page is set up:</h1>
  
  <p><img src="https://i.paste.pics/b7383cbed3b45ad79ef57f1505c05a50.png" alt="page image"></p>
  
  <p>When a file or image is uploaded to a field, it appears in a container div within the field's markup. The uploaded asset comes with a 'delete' button allowing the user to remove the upload.</p>
  
  <h1>Here's the basic HTML of the page</h1>
  
  <pre><code>&lt;form id = "form" action = "/process.php" method = "post"&gt;
  
      &lt;div class="field"&gt;
          &lt;label class="field-label"&gt;
              &lt;span class="field-label-text"&gt;Upload 1&lt;/span&gt;
              &lt;input type="file" data-name="answer1" name="files_answer1[]" /&gt;
          &lt;/label&gt;
  
          &lt;!-- destination for ajax response messages --&gt;
          &lt;div id="ajax-message-answer1" class="ajax-field-message"&gt;&lt;/div&gt;
  
          &lt;!-- upload button --&gt;
          &lt;button type="button" class="ajax-button" data-field="answer1" data-type="files"&gt;Upload&lt;/button&gt;
  
          &lt;!-- container div for uploads --&gt;
          &lt;div class="assets" id="assets-answer1"&gt;
              &lt;div class="asset file"&gt;
                  &lt;a href="&lt;file path&gt;"&gt;Name of file&lt;/a&gt;
                  &lt;label class="asset-action"&gt;
  
                      &lt;!-- deletion button to remove asset --&gt;
                      &lt;button type="button" data-asset="asset1" data-parent="answer1" class="ajax-delete" value="asset1" onclick="return confirm('You are about to delete this item. Press OK to proceed.')"&gt;Delete&lt;/button&gt;
  
                  &lt;/label&gt;
              &lt;/div&gt;&lt;!-- .asset.file --&gt;
          &lt;/div&gt;&lt;!-- .assets --&gt;
      &lt;/div&gt;&lt;!-- .field --&gt;
  
      .... more fields of the same kind ...
  
      &lt;button type = "submit" id = "save"&gt;Save&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <h1>JS</h1>
  
  <p>There are several other scripts in the page, such as jQuery, jQuery UI, Bootstrap, and some custom ones for generating slugs, etc. But I'm thinking these aren't to blame since the problem began only when I started running more than one Ajax request in the page. Here's the JS:</p>
  
  <h2>Form Update script</h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          // process form
          $('#form').submit(function(eform) {
  
              // stop regular form submission
              eform.preventDefault();
  
              // set variables
              var form = $('#form');
  
              // serialize form data
              var fdform = form.serializeArray();
  
              // make request
              $.ajax({
                  url: '/account/ajax.php',
                  type: 'post',
                  data: $.param(fdform),
                  dataType: 'json',
                  success: function(data) {
                      // get URL for redirect if supplied
                      if (data.redirect) {
                          window.location.href = data.redirect;
                      } else {
                          // replace with updated template from response    
                          $('#form').html(data.html);
                          // place template js in specified div
                          $('#ajax-js').html(data.js);
                      }
                  },
                  error: function(report) {
                      console.log(report.responseText);
                  }
              });
          }); // .click
      }); // .ready
  &lt;/script&gt;
  </code></pre>
  
  <h2>Per-Field Upload script</h2>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
  
          $(".ajax-button").click(function() {
  
              var fdUpload = new FormData();
  
              // get field info from the clicked button
              var field = $(this).data('field');
              var uploadType = $(this).data('type');
              var input = $('#' + field)[0];
  
              var container_id = '#assets-' + field;
              var button_id = '#button-' + field;
  
              // add each file to uploads array
              $.each(input.files, function(i, upl) {
  
                  // add each file to target element in fdUpload
                  fdUpload.append(uploadType + '[]', upl);
  
              });
  
              // make request
              $.ajax({
                  url: '/account/ajax.php',
                  type: 'post',
                  data: fdUpload,
                  dataType: 'json', // returns success(data) as object
                  contentType: false,
                  processData: false,
                  success: function(data) {
                      // put received html in container
                      $(container_id).html(data.html);
                      // put received js in #ajax-js
                      $('#ajax-js').append(data.js);
  
                      // clear file input after upload completes
                      input.value = '';
                      if (!/safari/i.test(navigator.userAgent)) {
                          input.type = '';
                          input.type = 'file';
                      }
                  },
                  error: function(report) {
                      console.log(report.responseText);
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <h2>Per-Upload Deletion script</h2>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
  
          $(".ajax-delete").click(function() {
  
              var fdDelete = new FormData();
  
              // get asset info from clicked button
              var asset = $(this).data('asset');
  
              var parent = $(this).data('parent'); // answer
              var container_id = '#assets-' + parent;
  
              var button_id = '#delete-' + asset;
              var message_id = '#ajax-message-' + asset;
  
              // make request
              $.ajax({
                  url: '/account/ajax.php',
                  type: 'post',
                  data: fdDelete,
                  dataType: 'json',
                  contentType: false,
                  processData: false,
                  success: function(data) {
                      // put received html in container
                      $(container_id).html(data.html);
                      // put received js in #ajax-js
                      $('#ajax-js').html(data.js);
                      // retrieve and display response status
                      $(message_id).html(data.status);
                      $(message_id).addClass('show');
                  },
                  error: function(report) {
                      console.log(report.responseText);
                  }
              });
          });
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <h1>Summary</h1>
  
  <p>Again, each ajax request works when activated after a fresh page load. But after the form has been updated or after an upload or deletion, the upload and deletion no longer fire.</p>
  
  <p>The 'error' callback doesn't display anything in console when this failure occurs.</p>
  
  <p>Do you see a conflict somewhere in the scripts? Maybe the scripts need function names defined? Or is it a problem that the returned response object is called 'data' in each script? </p>
  
  <p>I haven't been working with Ajax very long, so I'd really appreciate your help. I've been banging my head on this all day.</p>