php - 隐藏/显示 Jquery 与日期选择器不工作

Question

我正在尝试开发一个日历输入变量，它还允许输入框使用日期选择器。

HTML

    <select id="select">
  <option value="Type">Type</option>
  <option value="Range">Range</option>
  <option value="Individual">Individual</option>
</select>
<div id="range" style="display:none;">
<input type="text" name="job_from" id="job_from"  placeholder="From" class="datepicker" />
    <input type="text" name="job_to" id="job_to" placeholder="To" class="datepicker" />
</div>

<div id="ind" style="display:none;">

<button type="button" id="add2" class="submit">Add Another Date</button>
    <div id="item2">
        <div><input type="text" class="datepicker" name="jobdates[]" /></div>
        </div>
    </div>

脚本

 $(document).ready(function(){
    $("#add2").click(function (e) {
            //Append a new row of code to the "#items" div
            $("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
        });

    $("body").on("click", ".delete", function (e) {
        $(this).parent("div").remove();
    });

    $('#select').change(function(){
        if($('#select option:selected').text() == "Range"){
        $('#range').show();
        }
        else{
        $('#range').hide();
        }
        if($('#select option:selected').text() == "Individual"){
        $('#ind').show();
        }
        else{
        $('#ind').hide();
        }
    })
});     

Here is the jsfiddle

当我拿走 datepicker jquery 函数时，隐藏/显示功能会起作用，而当我将 datepicker 脚本放入任何东西都不起作用时。有人可以解释一下为什么我不能同时工作

Answer 1

您的代码很好，我相信您只是没有包含 DatePicker 运行所需的核心 jQueryUI 文件。

将其添加到页面的head:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

EXAMPLE 1

解决由于 jQuery 初始化后新元素写入 DOM 导致 datepicker 未初始化的问题datepicker，当用户创建新的 DOM 元素时，您只需调用 datepicker 即可。

$("#add2").click(function (e) {
        //Append a new row of code to the "#items" div
        $("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
        // This is where you need to add the datepicker jQuery again <<<<<<<<<
        $(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});

EXAMPLE 2