css - JQuery load() 函数禁用链接和 :hover effects?

Question

我正在尝试使用 jQuery load() 函数将不同文件中的内容加载到当前文件中的 div 元素中。没什么特别的，只是加载它就是这样。然而，包含在加载文件中的链接变为“禁用”，您无法单击它们，并且像 :hover 这样的伪类似乎也被排除在外。有解决办法吗？

$(document).ready(function() {
    $("div.content").load("content.html");
});

假设 content.html 只包含这一行:

<a href="somelink.html">xxx</a>

当它加载到 <div class="content"> 时该链接不可点击。它是根据 css 着色的，但是 :hover 效果不起作用，它的行为就像普通文本——而不是链接。这是一个问题，因为我尝试加载的内容有几个链接，但在加载 () 后它们都不起作用。

Answer 1

我认为您的问题是:

• 您使用 $('div.content').load('content.html') 发送内容请求(稍后)插入到 DOM 中。
• 然后您运行一些代码以使用 $(document).click、$(document).bind 等为节点指定处理程序 - 但此代码在新节点添加到 DOM 之前运行。
• 然后在 .load 调用完成时添加新节点。
• 您在所有原始 节点上定义的行为不会在新 节点上得到遵循。

如果这是您描述的问题 - 那么您需要在新节点创建后将所有相同的绑定(bind)添加到它们。

即您需要提供回调以将绑定(bind)添加到新元素:

function on_data_loaded() {
    $('div.content ...').hover(.....);
    // etc.
}
$('div.content').load('content.html', null, onloaded);

(请注意，这不是一种特别干净的方式，但它应该解释需要做什么)。