Bootstrap Datetimepicker無法崩潰

Question

我在bootsrap折疊javascript組件內使用bootstrap3鏈接的datetimepickers。 問題是datetimepicker沒有顯示。 我不確定是什么引起了該問題，因為我嘗試了z-index，正如許多其他人所推薦的那樣，但它並沒有解決我的問題。

這是我的腳本代碼。 我對jQuery不太熟悉，但是我編寫了這段代碼來將可折疊視圖動態添加到表單中

<script>
    var id = 0;
    function example_append() {
    id++;
    $(".newTicket").prepend("<li>" + 
    "<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Name'/>" + "</div>" + 
    "<div class='col-md-3'>" + "<input type='text' class='form-cantrol' placeholder='Quantity'/>" + "</div>" + 
    "<div class='col-md-2'>" + "<input type='text' class='form-cantrol' placeholder='Price'/>" + "</div>" + 
    "<div class='col-md-2'>" + "<a href='#" + id + "' alt='' data-toggle='collapse' aria-expanded='false'><img src='image/2x_web/ic_settings_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" + 
    "<div class='col-md-2'>" + "<a href='javascript:void(0);' class='remove'><img src='image/2x_web/ic_delete_black_36dp.png' alt='' style='width: 32px; height: 32px;'></a>" + "</div>" + 
    "</li>" +

    "<div class='collapse' id='" + id + "'>" +
      "<div class='well'>" +

        "<label>Description</label>" + "<input type='text' class='form-cantrol' placeholder='Enter a Description'/>" +

        "<div class='form-group'>" +
            "<div class='row'>"+
              "<div class='col-md-2'>"+
                "<label for='datetimepicker3'>Sales Start</label>"+
              "</div>"+
             "<div class='col-md-5'>"+
                "<div class='input-group date' id='datetimepicker3'>"+
                  "<input type='text' class='form-cantrol' />"+
                    "<span class='input-group-addon'>"+
                        "<span class='glyphicon glyphicon-calendar'></span>"+
                    "</span>"+
                "</div>"+
              "</div>"+
            "</div>" +
          "</div>" +

          "<div class='form-group'>" +
            "<div class='row'>"+
              "<div class='col-md-2'>"+
                "<label for='datetimepicker4'>Sales End</label>"+
              "</div>"+
             "<div class='col-md-5'>"+
                "<div class='input-group date' id='datetimepicker4'>"+
                  "<input type='text' class='form-cantrol' />"+
                    "<span class='input-group-addon'>"+
                        "<span class='glyphicon glyphicon-calendar'></span>"+
                    "</span>"+
                "</div>"+
              "</div>"+
            "</div>" +
          "</div>" +

        "<label>Minimum to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter the minimum'/>" +
        "<label>Maximun to Buy</label>" + "<input type='text' class='form-cantrol' placeholder='Enter that maximum'/>" +
      "</div>" +
    "</div>");
 }      
    $(document).on("click", "input-group-addon", function () {
            $('#datetimepicker3').datetimepicker();
            $('#datetimepicker4').datetimepicker();
            $("#datetimepicker3").on("dp.change", function (e) {
                $('#datetimepicker4').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker4").on("dp.change", function (e) {
                $('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
            });
        });

    $(document).on("click", "a.remove", function () {
    $(this).closest('li').remove();
    });
</script>


    <script type="text/javascript">
        $(function () {
            $('#datetimepicker3').datetimepicker();
            $('#datetimepicker4').datetimepicker();
            $("#datetimepicker3").on("dp.change", function (e) {
                $('#datetimepicker4').data("DateTimePicker").minDate(e.date);
            });
            $("#datetimepicker4").on("dp.change", function (e) {
                $('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
            });
        });
    </script>

Answer 1

也許問題是onclick從未觸發。

更改

$(document).on("click", "input-group-addon", function () {

至

$(document).on("click", ".input-group-addon", function () {