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

我有一个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控件无法正常工作

解决方法:

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

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

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

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

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

注意运算符顺序,它们与on()读取不同的逻辑更多.