jQuery tooltips on a dynamically generated page
Him I'm trying to add a jQuery tooltip to a dynamically generated list, the text I want to display the tooltip on is in a table, so my CSS tooltip doesn't work:
CSS tooltip.
I tried to add this jQuery tooltip to the page, it works on my local test page, but I think the problem has something to do with uniqur ids, and I'm not sure how to implement the bind all function explained there:
"To bind all of the targets to their corresponding content, it takes only one line:
$(".tooltip-target").ezpz_tooltip();
Calling ezpz_tooltip()
on a class will bind the hover event to each element, and because of the naming convention it will know which content to display.开发者_如何学编程"
Can someone help me to understand what exactly I have to do to make this work on a dynamic page?
The page is Euroworker's checkout product page. (You'll have to add some items to the basket, click the home button on the left of the bnav bar and click the little white button "kjøp" then the orange button "handlevogn".)
Thanks.
I believe you can call jQuery(".tooltip-target").ezpz_tooltip(); every time you add a new item (assuming they will have the tooltip-target class), but I'm not sure this is completely right.
Another way to achieve what you want is using a plugin like livequery. With the plugin you'll just need something like:
jQuery(".tooltip-target").livequery(function(){
j(this).ezpz_tooltip();
})
I have not enough information to solve the problem, but these tips might help you already:
- The link to your simpletip script seems absolute: -> is the www/public intended?
- Your page does not validate against a W3C HTML validator - which can cause trouble with DOM manipulation
- Your javascript throws errors (are you using prototype and jquery together? Be careful)
- You should use Firebug or Opera Dragonfly to see more details.
Try making the page as small as possible (remove redundant stuff) and get it working there. Then upload (to a test directory first ;))
The script simpletip.js is linked incorrectly. It's returning the 404 error page.
<script type="text/javascript" src="www/public/javascript/frontend/simpletip.js"></script>
Your page throws several javascript errors when it loads. I got this from the console in 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)
I'm not sure if cleaning this up will fix the problem, but at least it's a start.
加载中,请稍侯......
精彩评论