jQuery를 사용하여 ajax 양식을 제출하고 jQuery로 제출할 다른 양식을 수신합니다.

Question

DOM 객체를 다른 DOM 객체의 자식으로 추가 할 응용 프로그램을 만들고이 자식은 자식 객체를 가질 수 있습니다. 아래에 나와있는 것처럼 양식 제출 및 유효성 검사를 사용하고 있습니다. 문제는 AJAX 응답을 제출하고받을 때 DOM에 새 양식을 추가하고 제출할 때 initializeSubmit 함수를 무시하고 새 페이지를로드한다는 것입니다.

initializeSubmit.apply($newform); 

콘솔 로그는 $으로 newform에 대한 jQuery를 배열 내에서 해당 양식을 보여줍니다

jQuery(document).ready(function($) { 
    $('#wpbody-content form').each(initializeSubmit); 
}); 

function initializeSubmit() { 
    var $ = jQuery, 
     $form = $(this), 
     options = { 
      submitHandler: function() { 
       var postdata = {}, 
        $inputs = $form.find('input, textarea'), 
        edit_fields = {}; 
       $inputs.each(function() { 
        // gather postdata 
       }); 
       $.ajax({ 
        type : 'POST', 
        dataType : 'html', 
        url : ajaxurl, 
        cache : false, 
        data : postdata, 
        success : function (response) { 
          $container = $form.parent(); 
          $container.after(response); 
          $newform = $(response).find('form'); 
          $newform.each(initializeSubmit); 
        } 
       }); 
      } 
     } 

    $form.validate(options); 
}; 

는 또한 성공의 함수 내에서 대신 각각의 적용 사용하려고했습니다. 어떤 도움을 주셔서 감사합니다!

Answer 1

$container.after(response);으로 삽입 된 것에서 $(response).find('form')이 response의 다른 DOM 변환을 생성한다는 것이 문제라고 생각합니다.

.find('form')이 실제로 삽입 된 DOM 노드에서 작동하는지 확인해야합니다.

시도 : 완벽 로딩 직장에서 웹 페이지에

success : function (response) { 
    var $response = $(response); 
    $form.parent().after($response); 
    $response.find('form').each(initializeSubmit); 
}