jQuery on ("submit")은 다른 양식 안에 있기 때문에 ajax로로드 된 요소에 바인딩하지 않습니다.

Question

항목 테이블이 있습니다.

각 행의 첫 번째 열에는 양식의 일부로 입력 된 확인란이 있습니다. 사용자는이 체크 박스를 클릭하고 제출을 클릭하여 항목 삭제와 같은 대량 작업을 수행 할 수 있습니다.

행 열의 '데이터 추가'링크를 클릭하면 사용자가 항목 데이터를 입력 할 수있는 세 번째 열에 다른 양식이로드되는 상황이 jquery를 사용하여 설정되었습니다.

내가 원하는 것은 아약스를 사용하여이 두 번째 양식을 제출하는 것입니다. 나는 다음과 같은 코드를 사용하고이 작업을 수행하려면 :

$(document).on('submit',".add_form",function(event) 
{ 

    event.preventDefault(); 

    var serial=$(this).serialize(); 

    var domain=$('[name=domain]').val(); 


     $.ajax({ 
    url:"portfolio/transactions/"+domain+"/", 
    type:"post", 
    data: {data:serial}, 
    success: function(dat){ 
$('#transactions_div').html(dat); 
    } 
    }); 




}); 

을 그러나 이것은 작동하지 않습니다, 나는 HTML 양식에서 양식을 허용하지 않기 때문에이 믿습니다. 제 가정은 jQuery가 이러한 표준을 따르고 다른 태그 집합에 포함 된 div에 두 번째 형식이로드 될 때 혼란스러워지고 있다는 것입니다.

이 점을 감안할 때 간단히 할 수없는 것은 무엇입니까?

감사

Answer 1

이 시도 : 당신은 아마 지금의이 정기적 버튼으로 버튼을 제출 교체해야

$(document).on('submit', ".add_form", function (event) { 

    event.preventDefault(); 
    var serial = $(this).serializeArray(); 
    var domain = $('[name=domain]').val(); 

    $.ajax({ 
     url: "portfolio/transactions/" + domain + "/", 
     type: "POST", 
     data: serial, 
     success: function (data) { 
      $('#transactions_div').html(data); 
     } 
    }); 
}); 

Answer 2

HTML

<form class="add_form"> 
    <form class="secondForm"> 
     <input type="checkbox" /> 
    </form> 
    <input name="domain" type="text" /> 
    <!-- Replace the submit-Button with a normal button -->   
    <input type="button" value="Send" id="send"/> 
</form> 

JS

$(document).on('click', "#send", function() { 

    var serial = $(".add_form").serialize(); 
    var domain = $('[name=domain]').val(); 

    $.ajax({ 
     url: "portfolio/transactions/" + domain + "/", 
     type: "post", 
     data: serial, // serial instead of {data : serial} 
     success: function (dat) { 
      $('#transactions_div').html(dat); 
     } 
    }); 
});