Javascript jquery克隆不复制事件处理程序
我有一个表单和一个按钮,点击它我想重复某些表单字段。我正在将这些表单字段克隆到domready中,并尝试在单击按钮时添加更多表单字段 但我只能添加一个元素。甚至按钮的事件处理程序也不工作 这是我的密码-Javascript jquery克隆不复制事件处理程序,javascript,twitter-bootstrap,jquery,Javascript,Twitter Bootstrap,Jquery,我有一个表单和一个按钮,点击它我想重复某些表单字段。我正在将这些表单字段克隆到domready中,并尝试在单击按钮时添加更多表单字段 但我只能添加一个元素。甚至按钮的事件处理程序也不工作 这是我的密码- <div id="word_exp_area" <?php echo($wi['work_exp_label'] == 1 ? '' : 'style="display:none;"'); ?> > <div id="xxx"> <
<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>
设置
添加雇主
按钮只工作一次。结果表明,如果将克隆功能移动到单击处理程序中,一切正常:
试试看,
.clone(true,true)
我试过了。这也不起作用。复制的div将具有与旧div相同的id。ID应该是唯一的,您可以使用css类来代替。@Esa是的。克隆后,我正在呼叫removeAttr
,因为它不再需要了。是的。我使用同一个对象并将其附加到同一个容器中。所以调用了处理函数,但我看不到任何更改。
var $formClone = $("#xxx").clone(true);
$(".add_employer").click(function(e){
e.preventDefault();
$formClone.appendTo($("#word_exp_area"));
});
$(".add_employer").click(function (e) {
var $formClone = $("#xxx").clone(true);
$formClone.appendTo($("#word_exp_area"));
});