用ajax填充div，不调用jquery函数

Question

我有一个带有 2 个按钮的页面。 这个页面有这个div：

<div id="parentDiv" style="display:none">
    <div id="subDiv"></div>
</div>

单击按钮会使用 ajax 调用填充子 div 并向下滑动父 div。 ajax 调用一个页面，其中包含一个表单并调用一个 javascript 文件。表单正在为每个按钮填充不同的值。

在表单加载的 javascript 文件中，我有以下代码：

$(function() {
    alert('in');

    $('#close').on('click', function() {
       $('#subDiv').empty();
       $('#parentDiv').slideUp();
    });
});

问题是，点击按钮 1 我收到警报，然后我关闭表单并点击第二个按钮，然后我就再也没有收到警报了。

为什么会这样？

Answer 1

您的警报会在文件初始化 (init) 时触发。您的关闭按钮的代码中没有alert();。

如果您希望关闭按钮触发alert();，那么您必须在代码中显式添加它。我将alert()改为console.log()（更适合调试）。如果假设有警报，您可以更改它。这有意义吗？

编辑
您的按钮不起作用的原因是因为您正在动态加载文件。在您的情况下，您需要将事件绑定到 document、body 或加载时 DOM 中的某个元素，我建议您使用 body 或 document

$(function() {
    console.log('file init');

    $(document).on('click', '#close', function() {
       $('#subDiv').empty();
       $('#parentDiv').slideUp();

       console.log('I closed the form');
    });
});