jQuery ajax 获取子页面并覆盖原先页面会导致子页面定义好的操作失效（this指向问题）

背景：

父页面定义好一些 jQuery 的 DOM 操作，比如

父页面

<div class="children">这是将要被覆盖的区域</div>

<script>
$('.children').click(function () {
    console.log($(this).text())
})
</script>

ajax 获取子页面，并覆盖父页面

子页面

<div class="children">这是 ajax 加载的子页面</div>

JS

$.ajax({
    ...
    success: function(html) {
        $('.children').replaceWith(html);
    }
})

问题：

我需要实现 ajax 覆盖的内容也能实现点击的时候输出 text 内容，实际上会报错

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

原因：

这实际上是父页面没有获取到 $('.children') 这个节点，以至于接下来的 $(this) 指向也存在问题

解决：

知道原因就好解决问题了，实际上我并没有找到其他比较好的解决方法，只能先过渡下

方法 ① ：页面中使用 onclick 事件

直接在 HTML 页面中使用 onclick 方法，父页面需要小修改下

父页面

<div class="children">这是将要被覆盖的区域</div>

<script>
function children () {
    $('.children').click(function () {
        console.log($(this).text())
    })
}

</script>

子页面需要修改一下，在 HTML 页面中定义 onclick 事件

子页面

<div class="children" οnclick="children()">这是 ajax 加载的子页面</div>

方法 ② ：将父页面定义好的事件直接移动到子页面中

方法 ① 需要修改的地方还是挺多的，既然父页面定义好的事件并没有被执行，于是我想可不可以直接在子页面定义好事件直接返回呢？实际上是可以的

父页面

<div class="children">这是将要被覆盖的区域</div>

子页面

<div class="children">这是 ajax 加载的子页面</div>

<script>
function children () {
    $('.children').click(function () {
        console.log($(this).text())
    })
}
</script>

方法 ③ ：ajax 中定义事件

方法 ② 会存在一个问题，如果子页面特别多，需要一直复用 click 事件，则需要在每个子页面中复制粘贴相同的事件，如果需要修改这个事件则需要重复修改

既然是 ajax 中返回覆盖父页面的，那么是可以在覆盖后返回这个 click 事件

父页面

<div class="children">这是将要被覆盖的区域</div>

子页面

<div class="children">这是 ajax 加载的子页面</div>

JS

$.ajax({
    ...
    success: function(html) {
        $('.children').replaceWith(html);
        $('.children').click(function () {
            console.log($(this).text())
        });
    }
})