DOM 更改后 jQuery 无法处理动态内容

Question

我有一个有 2 个版本的网络表单。加载页面时，默认版本（我们称之为版本 1）显示在 div <div id="oAuthPanel"> 内。

在这些表单本身（两个版本）中，有一对单选按钮，包裹在<span> 标签中，用于通过 jQuery + Ajax 切换表单版本。

当用户单击第二个单选按钮（或围绕它的<span> 标记内的任何位置）时，一些 jQuery 会捕获单击并通过.load() 检索表单的版本 2。表单的版本 2 现在应该是 div <div id="oAuthPanel"> 内的内容。如果用户单击第一个单选按钮，jQuery 应该再次检索表单的版本 1。

但是，切换并不顺利。表单的第二个版本在加载页面后第一次加载良好（通过单击第二个单选按钮）。但是，如果我先单击该单选按钮。但在那之后，当我单击第一个单选按钮等时，它不会切换回来。

这里是 jsFiddle 给出代码的想法（但它在一个开发框上，所以 ajax 部分不起作用）。

https://jsfiddle.net/robarwebservices/6xkoy7bz/1/

我怎样才能按预期进行这项工作？

Answer 1

问题在于我编写 jquery 来处理切换的方式。由于表单本身是动态的，我不得不像这样更改行：

$('#oaSpanLinkNative').click(function () {

到

$(document).on('click', '#oaSpanLinkNative', function () {

这里的前两个答案解释了这个工作的原因：

Jquery function doesn't work after Ajax call