动态生成页面上的 jQuery 工具提示答案

【问题标题】：jQuery tooltips on a dynamically generated page动态生成页面上的 jQuery 工具提示
【发布时间】：2010-04-28 12:28:09
【问题描述】：

他我正在尝试将 jQuery 工具提示添加到动态生成的列表中，我想要显示工具提示的文本在表格中，所以我的 CSS 工具提示不起作用：

CSS tooltip.

我尝试将这个jQuery tooltip 添加到页面中，它在我的本地测试页面上工作，但我认为问题与 uniqur id 有关，我不确定如何实现解释的绑定所有功能那里：

"要将所有的目标绑定到它们对应的内容上，只需要一行：

$(".tooltip-target").ezpz_tooltip();
Calling ezpz_tooltip()

一个类会将悬停事件绑定到每个元素，并且由于命名约定，它会知道要显示哪些内容。”

有人可以帮助我了解我必须做什么才能在动态页面上进行这项工作吗？

页面是Euroworker's checkout product 页面。（您必须将一些物品添加到购物篮中，单击 bnav 栏左侧的主页按钮，然后单击白色小按钮“kjøp”，然后单击橙色按钮“handlevogn”。）

谢谢。

【问题讨论】：

标签： javascript jquery html css tooltip

【解决方案1】：

我相信您每次添加新项目时都可以调用jQuery(".tooltip-target").ezpz_tooltip();（假设他们将拥有tooltip-target 类），但我不确定这是否完全正确。

实现您想要的另一种方法是使用像livequery 这样的插件。使用该插件，您只需要以下内容：

jQuery(".tooltip-target").livequery(function(){
   j(this).ezpz_tooltip();
})

【讨论】：

【解决方案2】：

我没有足够的信息来解决问题，但这些提示可能已经对您有所帮助：

您的 simpletip 脚本的链接似乎是绝对的：-> www/public 是有意的吗？
您的页面未针对 W3C HTML 验证器进行验证 - 这可能会导致 DOM 操作出现问题
您的 javascript 抛出错误（您是否同时使用原型和 jquery？小心）
您应该使用 Firebug 或 Opera Dragonfly 来查看更多详细信息。

尝试使页面尽可能小（删除多余的东西）并让它在那里工作。然后上传（先到一个测试目录；））

【讨论】：

【解决方案3】：

脚本simpletip.js 链接不正确。它正在返回 404 错误页面。

<script type="text/javascript" src="www/public/javascript/frontend/simpletip.js"></script>

您的页面在加载时会引发几个 javascript 错误。我是从 firebug 的控制台得到的。

syntax error
[Break on this error] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\n
simpletip.js (line 4)

container.getElementsByClassName is not a function
[Break on this error] $A(container.getElementsByClassName('productOptionsMenu')).each(
gzip.p...8031024 (line 4441)

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://media1.juggledesign.com/portfolio/js/jquery.js :: anonymous :: line 22" data: no]
[Break on this error] (no source for )

$("searchField").addClassName is not a function
[Break on this error] $('searchField').addClassName('quickSearch');
gzip.p...8031024 (line 4928)

我不确定清理它是否能解决问题，但至少这是一个开始。

【讨论】：