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识别。为了解决这个问题，请使用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){

如果您使用的是早于1.7版的jQuery，请使用delegate()：

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

请注意操作员顺序，它们与on()在逻辑上读得更多不同。

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

1 个答案: