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

Question

我有一个使用引导主题的 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 控件不起作用

Answer 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() 不同，读起来更合乎逻辑。