[jQuery] Cancelling the behaviour of a link-initiated function
<html>
<body>
Hi folks,
I'm after some help/ideas of how to link a couple of "things"
together.
I have a page which holds several pieces of text that are hidden on
pageload. These are toggled into and out of view via a function
tied to an a.showme class combo.
I also have functionality to load content into the page via an ajax call
after page load. I bind an a.txtload combo to a function that loads
the content.
In some instances I have both classes ('showme' and 'txtload') on the
same link - I want to load material in on a link click and then reveal
that material.
Thus far fine.
My problem is that when I click the a tag to toggle the newly inserted
text out of view, I also initiate another AJAX call.
How can I set things up that once material is loaded via ajax, it won't
be loaded again when the link is clicked?
I tried adding $(this).removeClass('txtload'); before the call to
fnGetEbookFile (line 2 of the code below) to remove the txtload
from the specific link that has been clicked, but despite Firebug showing
that the class has been removed, its behaviour on that link
continues.
Thanks,
Bruce
<pre>$(document).ready(function() {
<x-tab> </x-tab>
$('a.txtload').bind("click",function()
{fnGetEbookFile($(this).attr('id'));});
</pre><tt><x-tab> </x-tab>
$('#main').find('.hideme').fadeOut().end();<x-tab>
</x-tab><x-tab>
</x-tab><x-tab>
</x-tab>
<x-tab> </x-tab>
$('a.showme').each(function(i) {
<x-tab> </x-tab>
<x-tab> </x-tab>var $match =
$('.hideme').eq(i);<x-tab>
</x-tab><x-tab>
</x-tab><x-tab>
</x-tab><x-tab>
</x-tab>
<x-tab> </x-tab><x-tab>
</x-tab>
$(this).toggle(function() {
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>
$match.fadeIn('slow');
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>}, function ()
{
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>
$match.fadeOut('slow');
<x-tab> </x-tab><x-tab>
</x-tab><x-tab>
</x-tab>}
<x-tab> </x-tab><x-tab>
</x-tab>);
<x-tab> </x-tab>});
</tt><font face="Courier New, Courier">});
function fnGetEbookFile(ni){
$.ajax({
url:
'textfiles/'+ni+'.txt',
type: 'GET',
cache: false,
dataType: 'html',
timeout: 5000,
success:
function(responsetxt){
$('#'+ni).html('');
$('#'+ni).append(responsetxt);
}
});
}</font> </body>
</html>