jqueryを使用してajaxによって生成されたフォームをシリアライズ

Question

フォームにはチェックボックスがあり、ajaxとjqueryのUIタブを使用して生成されます。私は誰かがボタンをクリックしたときに投稿をフォームに投稿しています。これは、最初のタブでは、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がロードされています。

Answer 1

IDは一意である必要がありますが、フォームごとにIDを使用するように聞こえます（動作しないもの、ブラウザは1つの要素しか取得しません - ブラウザによって異なります）。 新しいフォームが読み込まれるとすぐに最後に使用したフォームを削除してみてください。

それとも別のセレクタを使用し、form:visible