使用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()（更适合于debuging）。如果有警告，您可以更改它。这有意义吗？

修改
您的按钮不起作用的原因是您正在动态加载文件。您需要将事件绑定到ie 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');
    });
});