javascript - JQuery 库不再触发的问题

Question

我确实有这个工作，但我已经改变了一些东西以使事情变得更整洁，但它不再工作了。我删除了一些代码，但我有一个页面project.php，其基本结构如下

<?php include_once "templates/header.php"; ?>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <form role="form">
                    <div class="form-group">
                        <label>Activity</label>
                        <select class="form-control" id="projectActionSelect">
                            <option value="">Please select...</option>
                            <option value="addProject">Add Project</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="col-lg-6" id="projectMainContainer">

            </div>
        </div>
    </div>
<?php include_once "templates/footer.php"; ?>

header.php 和 footer.php 基本上执行您期望它们执行的操作，例如添加我的脚本。

然后我就有了一个处理事情的 javascript 文件。我认为它的作用是

$('#projectActionSelect').on('change', function (e) {
    if($(this).val() == 'addProject'){
        $.ajax({
            url: 'templates/project/addProject.php'
        }).done(function(data) {
            $('#projectMainContainer').append(data);
        });
    } else {
        $('#addProjectForm').remove();
    }
});

因此，如果选择更改为“添加项目”，它会附加 addProject.php，它基本上是一个包含表单的模板。我不会全部展示，但看起来如下

<div id="addProjectForm">
    <h2 class="main-header">Add Project</h2>

    <form class="form-horizontal" role="form" id="projectIdentified">
        <div class="form-group">
            <div class="col-sm-5 noPadding listLayout">
                <label for="startDate" class="col-sm-12 control-label green marginBottom10">WHEN</label>
                <ul>
                    <li>1. Does it start?</li>
                    <li>2. Does it have to be delivered?</li>
                </ul>
            </div>
            <div class="col-sm-7">
                <div id="false-height"></div>
                <p><span class="fixed-width">Start Date:</span> <input type="text" id="startDate"></p>
                <p><span class="fixed-width">Delivery Date:</span> <input type="text" id="deliveryDate"></p>
            </div>
        </div>

        <button type="submit" class="btn btn-default" id="sbtBtnIdentified">Submit</button>
    </form>

    <div class="result"></div>
</div>

所以这一切都很好，如果我更改选择，表单就会添加到页面中。

这就是奇怪的地方。在我上面显示的添加的表单中，有两个日期字段。在我的 javascript 文件中，我有

$( "#startDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onSelect: function(selected) {
        var date = $(this).datepicker('getDate');
        if (date) {
            date.setDate(date.getDate());
        }
        $("#deliveryDate").datepicker("option","minDate", date);
    }
});

$( "#deliveryDate" ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    dateFormat: 'dd-mm-yy',
    onSelect: function(selected) {
        var date = $(this).datepicker('getDate');
        if (date) {
            date.setDate(date.getDate());
        }
        $("#startDate").datepicker("option","maxDate", date || 0);
    }
});

但是当我选择该字段时，什么也没有发生。

我还有一个验证方法，但如果我单击“提交”，则不会发生验证并且页面会刷新。

我可以看到我的库已加载，因此这似乎不是问题。

需要注意的重要一点是，这一切都按照我之前的方式正常工作，并且这是通过隐藏显示表单来完成的。自从我决定使用 ajax 加载表单后，这才停止工作。

有什么原因会导致它损坏吗？如果有原因，最好能得到解释，以便我能够完全理解。

谢谢

Answer 1

在 thllbrg 发布他的帖子后，我终于找到了答案

Jquery Event won't fire after ajax call