Question

我有一个表单和一个按钮，我想重复某些表单字段。我正在克隆那些表单字段并尝试在按钮单击时添加更多这些字段。

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

这是我的代码 -

<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按钮仅适用一次。

Answer 1

事实证明，如果将克隆功能移入点击处理程序，一切正常。 Fiddle：

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

jquery clone不复制事件处理程序

1 个答案: