jQuery DOM element

Question

Initial load of my page I have a form below

<div class="display-none">
    <div id="add-employee-container">
        <form name="create_employee" id="create_employee" method="post" action="#" onsubmit="return false;">      
            <label><span class="text-red">* </span>First Name:</label><input name="firstname" id="firstname" type="text" class="required"/><span></span><br /><br />
            <label><span class="text-red">* </span>Middle Name:</label><input name="middlename" id="middlename" type="text" class="required"/><span></span><br /><br />   
            <label><span class="text-red">* </span>Last Name:</label><input name="lastname" id="lastname" type="text" class="required"/><span></span><br /><br />
            <label><span class="text-red">* </span>Birth Day:</label><input name="bday" id="bday" type="text" class="required" id="date-pick"/><span></span><br /><br />
            <label>Tel No.:</label><input name="telno" id="telno" type="text" /><span></span><br /><br />
            <label><span class="text-red">* </span>Mobile No.:</label><input name="mobileno" id="mobileno" type="text" class="required"/><span></span><br /><br />
            <label><span class="text-red">* </span>Home Address:</label><input name="homeads" id="homeads" type="text" class="required"/><span></span><br /><br />           
            <div class="submit-container"><span class="pad-right-5"><input name="" type="submit" value="Create" class="submit-button create"/></span><input name="" type="button" value="Cancel" class="submit-button cancel-button"/></div>
        </form>                    
    </div>
</div> 

$(".add-employee").colorbox({
    width:"50%",
    inline:true, 
    title:'&nbsp;',
    href:"#add-employee-container"      
});  

after this form was submit and save with the database using codeigniter controller. I was append it with my list of records container. My problem now is I want to modify let say one records already added. Once I click a record then submit (id) in my controller thru jquery post and pass html in my colorbox, now the create button doesn't work even if I tried to submit the form still doesn't work. I think it is because it was not recognize as dom element since I was display it thru ajax, furtheremore on the initial load of my page I have already a form with same element.

editing of records below

$('.edit').click(function(){
    var employee_id = $(this).attr('name');
    $.post("<?php echo site_url('admin/employee/edit') ?>", {employee_id: employee_id},
        function (data){
            $('#add-employee-container').html(data);    
            $.fn.colorbox({
                width:"50%",    
                html:data,
            });                                 
        },'html'
    )       
});

my php function to edit records

function edit()
{   
    $employee_info = $this->admin_model->get_employee(false,false,$this->input->post('employee_id'));
    $html = '<form name="create_employee" id="create_employee" method="post" action="#" onsubmit="return false;">
            <h3 class="title-highlight-light-pink">Edit Employee Record</h3>
            <h2><span class="text-red">* <span style="font-style:italic">Required</span></span></h2>
            <div id="add-employee">
                <label><span class="text-red">* </span>Referal:</label>
                <select name="referal" id="referal">
                    <option value="" selected="selected">Select referal</option>  
                    <option value="2">Tirso</option>                                          
                </select>
                <span></span><br /><br />
                <label><span class="text-red">* </span>Type:</label>
                <input name="type" class="type" type="radio" value="direct"/>Direct
                <input name="type" class="type" type="radio" value="indirect"/>Indirect 
                <span></span><br /><br />                  
                <div class="input-container">          
                    <label><span class="text-red">* </span>First Name:</label><input name="firstname" id="firstname" type="text" class="required"/><span></span><br /><br />
                    <label><span class="text-red">* </span>Middle Name:</label><input name="middlename" id="middlename" type="text" class="required"/><span></span><br /><br />   
                    <label><span class="text-red">* </span>Last Name:</label><input name="lastname" id="lastname" type="text" class="required"/><span></span><br /><br />
                    <label><span class="text-red">* </span>Birth Day:</label><input name="bday" id="bday" type="text" class="required"/><span></span><br /><br />
                    <label>Tel No.:</label><input name="telno" id="telno" type="text" /><span></span><br /><br />
                    <label><span class="text-red">* </span>Mobile No.:</label><input name="mobileno" id="mobileno" type="text" class="required"/><span></span><br /><br />
                    <label><span class="text-red">* </span>Home Address:</label><input name="homeads" id="homeads" type="text" class="required"/><span></span><br /><br />
                </div>                 
                <div class="submit-container"><span class="pad-right-5"><input name="" type="submit" value="Create" class="submit-button create"/></span><input name="" type="button" value="Cancel" class="submit-button cancel-button"/></div>
            </div>
        </form>';

    echo $html; 
}   

here is to submit edited form (doesn't work)

$.post("<?php echo site_url('admin/employee/edit_save') ?>",
$("#create_employee").serialize(),
    function (data){
        alert (data);           
    },'json'
)   

Any suggestion or thoughts about this

Thanks in advance

Answer 1

It seems to me that there is some code missing from your question, but I would suggest that you handle the form submissions with the live handlers. These will match elements that have been added to the DOM later. You need to be careful about adding elements with the same ids, but it seems to me that you are just replacing them so you should be ok there.