JQuery DOM элемент

Question

Начальная загрузка моей страницы У меня есть форма ниже

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

после этого форма была представить и сохранить базу данных с помощью контроллера CodeIgniter. Я добавил его с моим списком контейнеров записей. Моя проблема теперь заключается в том, что я хочу изменить, допустим, уже добавлены записи. Как только я нажимаю на запись, а затем отправляю (id) в свой контроллер через почту jquery и передаю html в моем colorbox, теперь кнопка создания не работает, даже если я пытаюсь отправить форму, все равно не работает. Я думаю, это потому, что он не был признан элементом dom, так как я показывал его через ajax, более того, при начальной загрузке моей страницы у меня уже есть форма с одним и тем же элементом.

редактирование записей ниже

$('.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' 
    )  
}); 

моей функции PHP для редактирования записей

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

здесь, чтобы отправить отредактированное форму (не работает)

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

Любое предложение или мысли об этом

Заранее спасибо

Answer 1

Мне кажется, что в вашем вопросе отсутствует какой-либо код, но я бы посоветовал вам обрабатывать формы с помощью обработчиков live. Они будут соответствовать элементам, добавленным позднее в DOM. Вы должны быть осторожны с добавлением элементов с одинаковыми идентификаторами, но мне кажется, что вы просто заменяете их, чтобы вы были в порядке.