Два разных запроса ajax без обновления страницы

Question

У меня есть сайт, который использует ajax для загрузки сообщения непосредственно на страницу при нажатии.

Но ... У меня также есть контактная форма ajax на той же странице. Но если я сначала нажму пост, а затем хочу отправить сообщение позже, это не сработает. Но если я обновляю страницу и перехожу прямо в контактную форму и отправляю сообщение, оно не прерывается при отправке. Есть ли способ, которым я могу, возможно, «перезагрузить» ajax, не обновляя страницу, чтобы вы могли делать несколько вещей на моем сайте с помощью ajax?

$(document).ready(function() { 

    function yournewfunction() { 

     var requestCallback = new MyRequestsCompleted({ 
      numRequest: 3, 
      singleCallback: function() { 
       alert("I'm the callback"); 
      } 
     }); 

     var width = 711; 
     var animationSpeed = 800; 
     var pause = 3000; 
     var currentSlide = 1; 


     var $slider = $("#slider"); 
     var $slideContainer = $(".slides"); 
     var $slides = $(".slide"); 
     var $toggleRight = $("#right"); 
     var $toggleLeft = $("#left"); 

     $toggleRight.click(function() { 
      $slideContainer.animate({ 
       'margin-left': '-=' + width 
      }, animationSpeed, function() { 
       currentSlide++; 
       if (currentSlide === $slides.length) { 
        currentSlide = 1; 
        $slideContainer.css('margin-left', 0); 
       } 
      }); 
     }); 

     $toggleLeft.click(function() { 
      if (currentSlide === 1) { 
       currentSlide = $slides.length; 
       $slideContainer.css({ 
        'margin-left': '-' + width * ($slides.length - 1) + 'px' 
       }); 
       $slideContainer.animate({ 
        'margin-left': '+=' + width 
       }, animationSpeed, function() { 
        currentSlide--; 
       }); 
      } else { 
       $slideContainer.animate({ 
        'margin-left': '+=' + width 
       }, animationSpeed, function() { 
        currentSlide--; 
       }); 
      } 
     }); 




     if ($(".slide img").css('width') == '400px' && $(".slide img").css('height') == '400px') { 
      $(".options").css("width", "400px"); 
      $(".slide").css("width", "400px"); 
      $("#slider").css("width", "400px"); 
      $(".video-frame").css("width", "400px"); 
      var width = 400; 

     }; 



     if ($("#slider img").length < 2) { 
      $("#right, #left").css("display", "none"); 

     }; 



     if ($("iframe").length > 0 && $("iframe").length < 2) { 
      $(".options").css("width", "711px"); 
      $(".slide").css("width", "711px"); 
      $("#slider").css("width", "711px"); 
      $(".video-frame").css("width", "711px"); 
      $('.slide').hide(); 
      var width = 711; 


     }; 

     if ($(".slide img").css('width') > '400px' && $(".slide img").css('width') < '711px') { 
      $(".options").css("width", "600px"); 
      $(".slide").css("width", "600px"); 
      $("#slider").css("width", "600px"); 
      $(".video-frame").css("width", "600px"); 
      var width = 600; 

     }; 

    } 

    $.ajaxSetup({ 
     cache: false 
    }); 
    $(".post-link").click(function(e) { 
     e.preventDefault() 
     var post_link = $(this).attr("href"); 
     $("#single-post-container").html('<img id="loads" src="http://martinfjeld.com/wp-content/uploads/2015/09/Unknown.gif">'); 
     $("#single-post-container").load(post_link, function(response, status, xhr) { 
      if (status == "error") { 
       var msg = "Sorry but there was an error: "; 
       $("#error").html(msg + xhr.status + " " + xhr.statusText); 
      } else { 
       $("#main-content").fadeIn(500); 
       $("body").addClass("opens"); 
       yournewfunction(); 


      } 
     }); 

     requestCallback.requestComplete(true); 
     return false; 
    }); 




}); 


$(function() { 

    var form = $('#ajax-contact'); 

    var formMessages = $('#form-messages'); 


    $(form).submit(function(event) { 
     event.preventDefault(); 

     var formData = $(form).serialize(); 

     $.ajax({ 
      type: 'POST', 
      url: $(form).attr('action'), 
      data: formData 
     }).done(function(response) { 
      // Make sure that the formMessages div has the 'success' class. 
      $(formMessages).removeClass('error'); 
      $(formMessages).addClass('success'); 

      // Set the message text. 
      $(formMessages).text(response); 

      // Clear the form. 
      $('#name').val(''); 
      $('#email').val(''); 
      $('#message').val(''); 
     }).fail(function(data) { 
      // Make sure that the formMessages div has the 'error' class. 
      $(formMessages).removeClass('success'); 
      $(formMessages).addClass('error'); 

      // Set the message text. 
      if (data.responseText !== '') { 
       $(formMessages).text(data.responseText); 
      } else { 
       $(formMessages).text('Oops! An error occured and your message could not be sent.'); 
      } 
     }); 
    }); 


}); 

Answer 1

Хотя это трудно следовать именно то, что происходит, не будучи в состоянии видеть контекст вашего HTML и без вас дать нам более конкретное описание, какие именно строки кода не в состоянии выполнить, это, вероятно, потому, что один вызов Ajax заменяет кучу HTML, который захватывает все ваши обработчики событий. Итак, когда вы затем пытаетесь выполнить вторую операцию Ajax, это обработчик кликов больше не действует, поэтому ничего не происходит.

Замена элемента DOM теряет все обработчики событий, которые были прикреплены к исходному элементу DOM. Использование .html() или присвоение .innerHTML заменяет все элементы DOM внутри этого элемента, тем самым теряя все их обработчики событий.

Типичным решением для этого является либо переустановка обработчиков событий после замены содержимого, на которое вы хотите обработчика событий, либо использование делегированной обработки событий из родительского элемента, который не заменен.

Вот некоторые ссылки на делегированных обработки событий:

JQuery Event Handlers - What's the "Best" method

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

Should all jquery events be bound to $(document)?