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 () {