如何将 javascript 功能应用于 ajax 插入 html

Question

我有一个页面要求用户通过从弹出窗口中选择时间来输入时间。

php：

<div class="form-group">
    <label class="col-sm-4 control-label">Coaching Start Time</label>
    <div class="col-sm-5">
        <input class="form-control" type="text" id="timepicker" name="timepicker[]" placeholder="Enter Time" />
    </div>
</div>

javascript：

<script type="text/javascript">
$(document).ready(function() {

    /* setting time */
    $("#timepicker").datetimepicker({
        format : "HH:mm"
    });
});
</script>

我想要 select 并提交多个时间值的可能性，因此通过 ajax，我将 php 代码的副本插入到页面中。

Ajax 从主页调用：

//Once add button is clicked
$(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
        x++; //Increment field counter
        var sd = document.getElementById("hired_date").value;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
                $(wrapper).append(this.responseText);
            }
          }
        }
        xmlhttp.open("GET", "get_schedule_options.php?sd=" + sd, true);
        xmlhttp.send();
        return false;
    }
});

相关ajax php代码：

echo '<div class="form-group">
    <label class="col-sm-4 control-label" for="Old">Coaching Start Time</label>
    <div class="col-sm-5">
        <input class="form-control" type="text" id="timepicker" name="timepicker[]" placeholder="Enter Time" />
    </div>
</div>';

但是，由于在 ajax 插入额外的 html 代码之前应用了 javascript 代码，因此该功能将丢失。 我如何 go 关于将 javascript 功能应用于 ajax 插入代码？

Answer 1

在 append 在 HTML 中的响应之后添加相同的代码。 并确保您使用 class 选择器而不是 id。 在这之后 -

$(wrapper).append(this.responseText);

添加这个 -

 $(".timepicker").datetimepicker({
        format : "HH:mm"
    });

并且输入标签必须包含带有时间选择器的 class 即

<input class="form-control timepicker" type="text"  id="timepicker" name="timepicker[]" placeholder="Enter Time" />