Question

我正在创建一个包含三个部分的网站：获取项目，工作场所和更改日志。

我希望网站工作的方式是：首先获得一个项目，然后使用Ajax将项目加载到Workplace（作为表格，带有下拉菜单，日历以供您更改信息），然后进行更改/点击提交，更改将再次使用Ajax出现在更改日志中。

这样，我的整个网页不必每次获取Item或提交更改时都刷新。

另外，当您获得商品时，我将其放在SESSION中，并使用Ajax根据此会话的信息从数据库中提取数据来生成WorkPlace。

如果用户点击刷新，我也有静态代码可以使用SESSION中的信息从数据库加载Workplace表

我几乎完成了所有工作。但是，工作场所中有一个日期选择器，仅当您单击刷新页面时才起作用。 AKA仅在运行静态代码时有效。如果Workplace表是通过Ajax生成的，则日期选择器不起作用。

这是我的代码：


    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>


    $x = 0;
    foreach ($_SESSION['working'] as $ItemInWorking) {
    echo '<div class= "changeDate" class="input-group date mt-1">';
         echo '<input type="text" class="form-control" class="datepicker" id="datepicker{$x}" placeholder="{$ItemInViewing['EFFECTIVE_DATE']}" value="{$ItemInViewing['EFFECTIVE_DATE']}">';
    echo '</div>';
    $x++

}

<!-- Script for Datepicker  -->
<script type="text/javascript">
    $("body").on("click", ".changeDate", function(){
    // $(document).ready(function() {
        $('[id^=datepicker]').datepicker({
            format: "dd-M-yy",
            startDate: "yesterday",
            todayBtn: true,
            autoclose: true,
            todayHighlight: true
        });
        return false;
    });
</script>

我做错了吗？请帮忙。任何帮助表示赞赏！

编辑：

控制台没有给我任何错误。只是当我获得Item时，就创建了表格，但是当我单击更改日期时，日历不会显示。

我将不得不刷新页面，也就是让静态代码运行，然后单击并查看日历。但是我还必须单击两次？。

Answer 1

打电话给

        $('[id^=datepicker]').datepicker({
        format: "dd-M-yy",
        startDate: "yesterday",
        todayBtn: true,
        autoclose: true,
        todayHighlight: true
    });

基本上将datepicker应用于页面上当前具有ID datepicker的所有元素。因此，在页面加载时调用此方法。（javascript库将其自身的onclick处理程序分配给那些元素）
在将输入插入页面后，也可以在ajax成功中调用此方法。这应该在datepicker处到达具有datepicker id的新插入的元素。
您不必像现在一样在onclick上调用此代码，这只会带来不必要的点击处理程序。

我还建议使用class而不是id来选择所有日期选择器，您的代码将更具可读性，并且当添加另一个没有id的日期选择器时，它将帮助您节省以后的麻烦。（相反，您只需向其添加类）

Ajax加载内容后脚本不起作用

1 个答案: