jQuery没有处理AJAX加载的html内容

Question

我有一个PHP管理仪表板,其中使用了bootstrap主题.我们知道它有内置的jQuery对象,如下拉菜单,折叠,制表符等等.如果我们刚刚添加了bootstrap js文件,它们都可以工作.

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

我使用这个ajax调用显示所有内页.所以它可能对加载的HTML有任何bootstrap javascript控件.

那么如何在每个ajax调用上动态修复此问题.我的ajax加载javascript在下面

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

注意:我的问题不在上面的代码中.当我从上面的代码加载html内容时,实际问题是bootstrap javascript控件无法正常工作

Answer 1

jQuery在运行时只知道页面中的元素,因此添加到DOM的新元素无法被jQuery识别.为了解决这种使用事件委托问题,将新添加的项目中的事件冒泡到jQuery在页面加载时运行时在DOM中的某个点.许多人使用它document作为捕捉起泡事件的地方,但没有必要在DOM树上走得那么高.理想情况下,您应该委托给页面加载时存在的最近的父级.

on()如果您的jQuery版本支持,请更改您要使用的click事件;

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

如果您使用的是早于1.7版的jQu​​ery,请使用delegate():

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

注意操作员的顺序,它们与on()逻辑上的阅读有所不同.