jQuery 无法处理 AJAX 加载的 html 内容

Posted 2023-02-24

【中文标题】jQuery 无法处理 AJAX 加载的 html 内容

【英文标题】：jQuery not working on AJAX loaded html content

【发布时间】：2015-06-29 06:18:07

【问题描述】：

我有一个使用引导主题的 php 管理仪表板。我们知道它具有内置的 jQuery 对象，如下拉菜单、折叠、选项卡等，如果我们只添加引导 js 文件，这一切都将起作用。

现在的问题是当我从 ajax 调用中获取内容并将其显示在我的页面上时，所有通过 ajax 加载的 javascript 控件都无法正常工作。

我正在使用这个 ajax 调用来显示我所有的内页。所以它可能对加载的 html 有任何引导 javascript 控件。

那么我怎样才能在每次 ajax 调用时动态解决这个问题。我的ajax加载javascript如下

$('a').bind('click',function(event)
    event.preventDefault();
    $.get(this.href,,function(response)
        $('#app-content-body').html(response)
    );
);

注意：我的问题不在我上面的代码中。实际问题是当我从上面的代码加载 html 内容时，引导 javascript 控件不起作用

【问题讨论】：

你是如何加载 HTML 的？ jQuery不添加点击事件吗？也许你有旧版本的 jQuery？

我的 HTML 加载脚本在上面，它工作正常。我的意思是当我在我的 div 中加载 HTML 内容时，javascript 无法处理加载的 HTML

【参考方案1】：

jQuery 仅在页面运行时才知道页面中的元素，因此添加到 DOM 的新元素无法被 jQuery 识别。为了解决这个问题，使用event delegation，从新添加的项目中冒泡事件直到 jQuery 在页面加载时运行时所在的 DOM 中的某个点。许多人使用document 作为捕捉冒泡事件的地方，但没有必要在DOM 树上爬那么高。理想情况下you should delegate to the nearest parent that exists at the time of page load.

将你的点击事件改为使用on()，前提是你的jQuery版本支持它；

$(document).on('click', 'a', function(event)

如果您使用 jQuery 1.7 之前的版本，请使用 delegate():

$('body').delegate('a' , 'click', function() 

注意操作符的顺序，它们与on() 不同，读起来更合乎逻辑。

【讨论】：

不，我不是在谈论上面的点击事件。我的意思是，如果 ajax 加载的 html 有一些引导导航菜单、选项卡、下拉菜单等，那一切都不起作用。

同样的问题，要么重新绑定引导函数，要么转换为事件委托。

是的，我知道。我必须重新绑定。但我不知道在 ajax 加载之后会出现哪些引导 javascript 控件。那么如何重新绑定 Bootstrap 中的所有内容呢？比如下拉菜单、标签等，