Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

    How can I add multiple listeners to an element with jQuery

    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.

    Code:
    <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?)
    Code:
    <a class="glossaryLink" href="#">Life</a>
    But from here I can't seem to get 3 listeners to work properly.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    You can chain them, like so. I think this is what you are looking for

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

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Still can't get it. I can't even get this one function to work.

    Code:
    <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>
    Code:
    function setGlossLinkListeners()
    {
    	$('a.glossaryLink').hover(function(){
    		onRollOverPULink()
    	})
    }

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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


    Code:
    $(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()
    Last edited by DanInMa; 10-05-2012 at 01:43 AM.

  • Users who have thanked DanInMa for this post:

    m2244 (10-05-2012)

  • #5
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    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?
    Last edited by m2244; 10-05-2012 at 01:00 PM.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    thats quite possible, the older way is .live()

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by m2244 View Post
    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.

  • #8
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post
    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:

    Code:
    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.
    Last edited by m2244; 10-05-2012 at 01:46 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •