jquery - 无法将 AddClass 添加到 html 表单 jquery

Question

当用户单击添加行 按钮时，我无法将类 (daterange daterange-inline) 添加到表单元素 date_range，我不知道我可能做错了什么。该类在页面加载时添加到日期字段，但在用户单击添加行 按钮时不起作用，它仅显示普通文本框。我也尝试过在没有 Jquery 方法的情况下直接在表单中插入类，但仍然失败。

HTML

<div id="student_entry">
    <div class="row">

        <div class="col-md-offset-1 col-md-2">
            <div class="form-group">
                <label  class="control-label"
                       style="margin-bottom: 5px;"><?php echo get_phrase('week'); ?></label>
                <input type="number" min="1" max="15" class="form-control"
                       name="week[]" value="<?php echo $row1['week']; ?>" data-validate="required"
                       data-message-required="<?php echo get_phrase('value_required'); ?>"
                       required/>
                <div class="error"></div>
            </div>
        </div>
<!-- DATE RANGE PICKER -->
        <div class="col-md-3">
            <div class="form-group">
                <label class="control-label"
                       style="margin-bottom: 5px;"><?php echo get_phrase('date'); ?></label>
                <input type="text" required name="date[]"
                       class="form-control date_range"
                       data-format="MMMM D, YYYY"
                       value="<?php echo $row1['date']; ?>">

            </div>
        </div>


        <div class="col-md-3">
            <div class="form-group">
                <label class="control-label"
                       style="margin-bottom: 5px;"><?php echo get_phrase('activities'); ?></label>
                <textarea class="form-control autogrow" required name="activities[]"
                          id="field-ta"
                          placeholder="<?php echo get_phrase('activities'); ?>"><?php echo $row1['activity']; ?></textarea>

            </div>
        </div>

    </div>
</div>
<div id="student_entry_append"></div>
<!-- add a row when User click button -->

    <br>
    <div class="row">
        <div style="text-align: center;">
            <button type="button" class="btn btn-default"
                    onclick="append_student_entry()">
                <i class="entypo-plus"></i> <?php echo get_phrase('add_a_row'); ?>
            </button>
        </div>
    </div>

Javascript

var blank_student_entry ='';
$(document).ready(function() {
    blank_student_entry = $('#student_entry').html();
    $(".date_range").addClass("daterange daterange-inline");    
});

function append_student_entry()
{
    $("#student_entry_append").append(blank_student_entry);
}

 function deleteParentElement(n) {
        n.parentNode.parentNode.parentNode.parentNode.removeChild(n.parentNode.parentNode.parentNode);
    }
</script>

Answer 1

添加类后，您需要触发元素上的日期选择器，因此您的函数应如下所示:

function append_student_entry()
{
    $("#student_entry_append").append
(blank_student_entry);
$('input.date_range' ).daterangepicker();
}

这将在类为 date_range 的输入元素上触发日期选择器