jquery를 사용하여 ajax에 의해 생성 된 양식 직렬화

확인란이있는 양식이 있으며 ajax 및 jquery UI 탭을 사용하여 생성됩니다. 누군가가 버튼을 클릭 할 때 우편으로 양식을 제출합니다. 그것은 아약스와 함께로드 된 첫 번째 탭에서 작동하지만 다른 탭을 클릭 한 다음 양식을 제출하려고하면 양식의 데이터가 비어 있습니다. 따라서 폼이 비어 있다고 생각하기 때문에 탭을 변경 한 후에 serialize 함수가 작동하지 않습니다.jquery를 사용하여 ajax에 의해 생성 된 양식 직렬화

// Bulk action Delegate 
$("body").delegate(".bulk_action_btn", "click", function(){ 
    var data = $("#ActionAddForm").serialize(); 
    var action = $(this).attr('title'); 
    var currentTab = $("#asst_tabs").tabs("option", "selected"); 


    $('.asst_list2').fadeOut(); 
    $.ajax({ 
     type: "POST", 
     url: "<?php echo $html->url("/admin/actions/perform/") ?>"+currentTab + '/' + action, 
     data: data, 
     cache: false, 
     success: function(html){ 
      $('.asst_list2').html(html); 
      $('.asst_list2').fadeIn(100); 
      // $("input[type=checkbox]").attr("checked",false); 
     } 
    }); 
});

여기에 상대적인 HTML 마크 업이 있습니다. 실제 마크 업은 훨씬 길어집니다.

<div class="asst_action_bar"> 
<div class="action_group"> 
<p>Bulk Actions</p> 
    <input value="Follow" class="bulk_action_btn" title="Follow" type="button"> 
    <input value="Unfollow" class="bulk_action_btn" title="Unfollow" type="button"> 
</div> 
<form action="/admin/actions/add" method="post" id="ActionAddForm"> 
<fieldset style="display: none;"><input type="hidden" value="POST" name="_method"></fieldset> 
<!-- Loaded with ajax --> 
<div class="input checkbox"><input name="data[Assignment][1580]" id="Assignment1580_" value="0" type="hidden"><input name="data[Assignment][1580]" value="1" id="Assignment1580" type="checkbox"></div>   <div id="1580"> 
<p><a href="javascript:" class="star"><img src="/img/top/followmestar-on.gif" alt="" height="40" width="40"></a></p> 
</div> 
<div class="input checkbox"><input name="data[Assignment][1580]" id="Assignment1580_" value="0" type="hidden"><input name="data[Assignment][1580]" value="1" id="Assignment1580" type="checkbox"></div>   <div id="1580"> 
<p><a href="javascript:" class="star"><img src="/img/top/followmestar-on.gif" alt="" height="40" width="40"></a></p> 
</div> 
<div class="input checkbox"><input name="data[Assignment][1580]" id="Assignment1580_" value="0" type="hidden"><input name="data[Assignment][1580]" value="1" id="Assignment1580" type="checkbox"></div>   <div id="1580"> 
<p><a href="javascript:" class="star"><img src="/img/top/followmestar-on.gif" alt="" height="40" width="40"></a></p> 
</div> 
<!-- Loaded with ajax end --> 
</form>

나는 그것이 작동하지 않는 이유는 아마 탭을 변경 한 후로드되지 않으며 "#ActionAddForm"선택 (양식의 ID)를 사용하고 있다고 생각합니다. 그게 도움이된다면 나는 백엔드에서 cakePHP를 사용하고있다. jquery 델리게이트 메서드를 사용하고 있는데 체크 박스가있는 양식이 작동하지 않았기 때문에 ajax가로드되었습니다.

출처

2011-01-21 jimiyash

이 마크 업없이 대답하기 어렵다 같은 것을 사용합니다. 그걸 제공해 줄 수 있니? 그리고 "아마도 #ActionAddForm"셀렉터를 사용하고 있는데 아마도로드되지 않았을 것입니다. – polarblau

"#ActionAddForm"은 양식의 ID입니다. 혼란을 드려 죄송합니다. html 마크 업을 추가하겠습니다. – jimiyash

여러 개의 탭에 여러 개의 양식이 있다고합니다. 그리고 다른 ID를 가지고 있습니까? – polarblau

ID는 고유해야하지만 ID가 모든 양식을 사용하는 것처럼 들립니다 (작동하지 않는 브라우저, 브라우저는 브라우저에 따라 달라지는 요소 1 개만 가져옵니다). 새 양식을로드하자마자 마지막으로 사용한 양식을 제거해보십시오.

또는 다른 선택, form:visible

출처

2011-01-21 09:07:23

jquery를 사용하여 ajax에 의해 생성 된 양식 직렬화

답변

관련 문제