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控件无法工作。

- Vinoth Kannan

---

你是如何加载HTML的？jQuery没有添加点击事件吗？也许你使用的是旧版本的jQuery？ - Halcyon

我的HTML加载脚本在上面，它运行良好。我的意思是，当我将HTML内容加载到我的div中时，JavaScript在加载的HTML上不起作用。 - Vinoth Kannan

Answer 1

jQuery只能识别在运行时页面中存在的元素，因此新添加到DOM中的元素无法被jQuery识别。为了解决这个问题，可以使用 事件委托 ，将事件从新添加的元素向上冒泡，直到DOM中的某一点（在jQuery页面加载时存在）。许多人使用document作为捕获冒泡事件的位置，但不必那么高往DOM树上走。理想情况下，您应该委托给在页面加载时存在的最近父级。

如果您的jQuery版本支持，将click事件更改为使用on()。

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

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

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

请注意操作符的顺序，它们与on()有所不同，读起来更加合理。

- Jay Blanchard

---

不，我不是在谈论上面的点击事件。我的意思是，如果ajax加载的HTML中有一些Bootstrap导航菜单、选项卡、下拉菜单等，它们都无法正常工作。 - Vinoth Kannan

这是同样的问题，你要么重新绑定bootstrap函数，要么转换为事件委托。 - Jay Blanchard

是的，我知道。我必须重新绑定。但我不知道在ajax加载后会出现哪些bootstrap javascript控件。那么如何重新绑定Bootstrap中的所有内容？例如下拉菜单、选项卡等。 - Vinoth Kannan