Serialize a form which is generated by ajax, using jquery

I have a form with checkboxes and it is generated using ajax and jquery UI tabs. I am submitting the form with post when someone clicks on a button. It works for the first tab loaded with ajax, but clicking on other tabs and then trying to submit the form, the data from the form is empty. So the serialize function does not work after changing tabs because it thinks the form is empty.

    // 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);
        }
    });
});

Here is the relative html markup, the actual markup is much longer.

开发者_如何转开发<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>

I think the reason it doesn't work is that I am using the "#ActionAddForm" selector (the id of the form), which is probably not loaded after changing tabs. I am using cakePHP on the backend if that helps. I am using the jquery delegate method because it didn't work the form with the checkboxes is loaded with ajax.

An ID has to be unique, but it sounds like you use the ID vor every form(what will not work, the browser fetches only 1 element - which one depends on the browser). Try removing the last used form as soon as the new form is loaded.

Or use another selector, something like form:visible