How can I add multiple listeners to an element with jQuery

[m2244]

Hello,

I am having some problems with adding multiple listeners to this <a> element. As you can see, there are 3 listeners I would like to apply.

<a class="glossaryLink" href="#" onmouseover="onRollOverPULink(event, 'Life');" onmouseout="onRollOutPULink(event);" onclick="defineTerm(event);">Life</a>

I was thinking that I would use the class to target multiple <a> tags, so I would only need this: (would I still need the href?)

<a class="glossaryLink" href="#">Life</a>

But from here I can't seem to get 3 listeners to work properly.

[DanInMa]

You can chain them, like so. I think this is what you are looking for

$('a.glossaryLink').mouseover(function(event){
onRollOverPULink(event, 'Life')
}).onmouseout(function(event){
onRollOutPULink(event)
}).click(function(event){
defineTerm(event)
})

[m2244]

Still can't get it. I can't even get this one function to work.

<ul>
  <li>
    	(U) Spiral 1.5: <a class="glossaryLink" href="#">SCCVI</a> and <a class="glossaryLink" href="#">SCRI</a>  </li>
  <li> (U) Spiral 2:  <a class="glossaryLink" href="#">HBSS</a>  </li>
</ul>

function setGlossLinkListeners()
{
	$('a.glossaryLink').hover(function(){
		onRollOverPULink()
	})
}

[DanInMa]

you dont need to contain them inside of a function like that ( unless you only want to activate them on demand for some reason) , put this in a script block in the head section and give it a try

$(document).ready(function(){

$('a.glossaryLink').mouseover(function(event){
var linkTxt = $(this).text();
onRollOverPULink(event, linkTxt)
}).onmouseout(function(event){
onRollOutPULink(event)
}).click(function(event){
defineTerm(event)
})

})

this will bind the lsiteners as soon as the dom is ready. if you need will be adding and removing elements on the fly, then you will need to go a step further and use .on()

[m2244]

Originally Posted by DanInMa

you dont need to contain them inside of a function like that ( unless you only want to activate them on demand for some reason) , put this in a script block in the head section and give it a try

this will bind the lsiteners as soon as the dom is ready. if you need will be adding and removing elements on the fly, then you will need to go a step further and use .on()

Thanks for the help here.

The content on the page is dynamic, it is loaded every time the user clicks the 'next' button, so this needs to run each time that happens.

I tried to simplify this so that only one function is added, in an attempt to get something working here. Still nothing. Does it have something to do with the document not being ready?

I was just messing around with .on() but I get an error telling me that it is not a function. Does that mean that I have an old version of jQuery?

[DanInMa]

thats quite possible, the older way is .live()

[VIPStephan]

Originally Posted by m2244

I was just messing around with .on() but I get an error telling me that it is not a function. Does that mean that I have an old version of jQuery?

That could very well be. And it is also easy to find out by looking at the file name of the jQuery file or, if that doesn’t indicate it, right into the jQuery file where the version usually is displayed prominently. You can then compare it with the version number shown on http://jquery.com – and get the latest version right away if applicable.

[m2244]

Originally Posted by VIPStephan

That could very well be. And it is also easy to find out by looking at the file name of the jQuery file or, if that doesn’t indicate it, right into the jQuery file where the version usually is displayed prominently. You can then compare it with the version number shown on http://jquery.com – and get the latest version right away if applicable.

Great advice, thanks.

By the way, I have NOT clicked your link.

This is what I ended up with:

function setGlossLinkListeners()
{
	$('a.glossaryLink').live("click", function(event){
		onRollOverPULink();
	});
}

But now I have another problem. When the link is clicked, it seems that the function onRollOverPULink() is running multiple times.