jquery克隆不复制事件处理程序

我有一个窗体和一个按钮，我要重复某些表单域。我正在克隆这些表单域并尝试在按钮单击时添加更多这些表单域。jquery克隆不复制事件处理程序

但我只能添加一个元素。即使按钮的事件处理程序也不起作用。

这里是我的代码 -

<div id="word_exp_area" <?php echo($wi['work_exp_label'] == 1 ? '' : 'style="display:none;"'); ?> > 
    <div id="xxx"> 
     <div class="control-group"> 
      <label class="control-label" for='emp_name'>Employer Name</label> 
      <div class="controls"> 
       <input type="text" name="work_emp_name" id="work_emp_name" 
         value="<?php echo (isset($wi['work_emp_name']) ? $wi['work_emp_name'] : ''); ?>"/> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for='work_date_start'>Date Started</label> 
      <div class="controls"> 
       <div class="input-append date" id="work_date_start_control" data-date="" data-date-format="yyyy-mm-dd"> 
        <input name="work_date_start" id="work_date_start" class="span2" size="16" type="text" readonly="" 
          value="<?php echo(isset($wi['work_date_start']) ? $wi['work_date_start'] : ''); ?>"/> 
        <span class="add-on"><i class="icon-calendar"></i></span> 
        <span class="help-block">yyyy-mm-dd format only.</span> 
       </div> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for='work_date_end'>Date Finished</label> 
      <div class="controls"> 
       <div class="input-append date" id="work_date_end_control" data-date="" data-date-format="yyyy-mm-dd"> 
        <input name="work_date_end" id="work_date_end" class="span2" size="16" type="text" readonly="" 
          value="<?php echo(isset($wi['work_date_end']) ? $wi['work_date_end'] : ''); ?>"/> 
        <span class="add-on"><i class="icon-calendar"></i></span> 
        <span class="help-block">yyyy-mm-dd format only.</span> 
       </div> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for='word_designation'>Designation</label> 
      <div class="controls"> 
       <input type="text" name="work_designation" id="work_designation" 
         value="<?php echo (isset($wi['work_designation']) ? $wi['work_designation'] : ''); ?>"/> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for='work_scope'>Scope of Work</label> 
      <div class="controls"> 
       <input type="text" name="work_scope" id="work_scope" 
         value="<?php echo (isset($wi['work_scope']) ? $wi['work_scope'] : ''); ?>"/> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for="">Appointment Letter from Employer</label> 
      <div class="controls"> 
       <input type="file" name="app_letter[]"/> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for="">Recommendation Letter from Employer</label> 
      <div class="controls"> 
       <input type="file" name="recommend_letter[]"/> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label></label> 
      <div class="controls"> 
       <div class="btn-toolbar pull-right"> 
        <div class="btn-group"> 
         <a class="btn add_employer" href="#"><i class="icon-plus"></i>Add Employer</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <hr> 
    </div> 
</div>

和JS -

var $formClone = $("#xxx").clone(true); 

$(".add_employer").click(function(e){ 
    e.preventDefault(); 
    $formClone.appendTo($("#word_exp_area")); 
});

设置JSFIDDLE HERE。

Add Employer按钮仅工作一次。

来源

2013-12-12 Gimali

尝试，'.clone（真，真）' – benhowdle89

我试过了。它也不适用于此。 – Gimali

复制的div将与旧的ID相同。 Ids应该是唯一的，您可以使用css-classes。 – Esko

原来，如果克隆功能被移入点击处理程序，一切工作正常。 Fiddle：

$(".add_employer").click(function (e) { 
    var $formClone = $("#xxx").clone(true); 
    $formClone.appendTo($("#word_exp_area")); 
});

来源

2013-12-12 10:09:12 jacquard

是的。我使用相同的对象并将其附加到相同的容器。所以处理函数被调用，但我看不到任何改变。 – Gimali

jquery克隆不复制事件处理程序

回答

相关问题