Question

当我尝试显示多个字段（测试，日期，时间）时，如果我将代码放在JavaScript之外，则单击那些datepicker应该运行并禁用过去的日期时遇到了这个问题工作正常，所以$ .each循环或追加操作一定有问题，但是我无法正常工作

<script type = "text/javascript" >
    $(document).ready(function() {
        $("#select_test").change(function() {
            var optionVal = [];
            $.each($("#select_test option:selected"), function() {
                if ($.inArray($(this).text(), optionVal) == -1) {
                    optionVal.push($(this).text());
                }
            });
            var myselect = $('<select>');
            var mydiv = $('<div>');
            $.each(optionVal, function(index, key) {
                mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
            });
            $('#testsdetails').empty().append(mydiv.html());
        });
    }); 
</script>

我在下面的脚本中打了datepicker。

<script>
   $(document).on('click', '.dates', function() {
    var dateToday = new Date();
    $(this).datepicker({
        minDate: 0
    }).focus();
    $(this).removeClass('datepicker');
});
</script>

Answer 1

我无法使用您提供的代码复制问题。

$(document).ready(function() {
  $("#select_test").change(function() {
    var optionVal = [];
    $.each($("#select_test option:selected"), function() {
      if ($.inArray($(this).text(), optionVal) == -1) {
        optionVal.push($(this).text());
      }
    });
    var myselect = $('<select>');
    var mydiv = $('<div>');
    $.each(optionVal, function(index, key) {
      mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
    });
    $('#testsdetails').empty().append(mydiv.html());
  });
  $(document).on('click', '.dates', function() {
    var dateToday = new Date();
    $(this).datepicker({
      minDate: 0
    }).focus();
    $(this).removeClass('datepicker');
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select id="select_test">
  <option></option>
  <option>1</option>
</select>
<div id="testsdetails"></div>

如果您仍然遇到问题，请发表评论并提供更多详细信息。如果您发现控制台有任何错误，请告诉我们。我怀疑这是基于您的HTML的BootStrap页面。

希望有帮助。

jQuery Datepicker不适用于追加

1 个答案: