I'm dealing with a translation application where you hover over a Spanish word and it's translation appears in English. I'm using the "qTip" plugin for this where an ajax request is issued for the tip content on hover.
On the ajax loaded content page (to show the translation), I have a simple button "a.myButton" that, when clicked, needs to issue an alert statement.
When I attempt this with a standard "click" handler, the alert is only executed the first time the tip is loaded, all subsequent tip loads (surprisingly to me) do not attach the click handler, so when the button is clicked, the alert is not issued. This led me to use the live method.
The live method is successful in ensuring the click issued to "a.myButton" does indeed execute the alert statement, the problem is that only the "first version" of the function gets executed. What I mean is, let's say on the main page I first hover over the word "hola", when I click on "a.myButton" I want to see "hola" in the alert, which I do. But if I then hover of the word "gracias", I expect to see the word "gracias" in the alert. However, instead of seeing "gracias", I always see "hola", the first word that was hovered over. In other words, in my amateur JavaScript mind it seems like the function passed to the "live" method is somehow being cached so that only it's first instance is ever executed.
Can anyone help me what is going on here? The code is very simple:
$("a.myButton").live("click", function(){
alert("#text#"); // text variable is passed in the ajax request
return false;
});
Thanks for any insight!
Brian
ps if anyone really wants to help and would like a little more info about what's going on, I've created a quick screencast to illustrate the problem here:
http://screenr.com/qgl