• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • paul wheaton
  • Devaka Cooray
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Liutauras Vilda
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Stephan van Hulst
  • Carey Brown
  • Piet Souris
Bartenders:
  • salvin francis
  • Mikalai Zaikin
  • Himai Minh

Onclick event gets fired only once?

 
Ranch Hand
Posts: 195
2
Netbeans IDE PHP Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Best, racnhers!

I am developing a script for a dropdown menu component in pure javascript and dom.
The html markup is printed from a php function. My problem is with the javascript part.
The menubar has a "My Profile" menu which has a submenu that consists of several items.

When I click on the "My Profile" menu then its submenu should appear repeatedly times
when the user hover over it with the mouse which is the general way. But as it is now, this
event gets triggered only once per page load and I can't understand why?

Below is the code for my drop down component it is hardly commented but I hope that a viewer
still will get a clear idea of what is going on. If the html markup is required as necessary material
then I will post the php code that generates it. But for now here is my javascript code.

Please forgive for maybe a badly described issue. I am a little bit stressed out over this.
Thank you very much in advance!



Best regards,
Robert!




   
 
Sheriff
Posts: 67525
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
On a quick inspection, I don't see anything glaring, except that it does strike me that the code is fairly over-complicated for what it aims to do. Simpler code is easier to debug and less prone to fragility, so I'd advise refactoring with the following approach:

  • Assign the elements to be assigned a click handler a common class name, and use the class name to find the elements rather than digging down through the hierarchy (which is always very fragile).
  • Use addEventLister to establish the click event handlers rather than the onClick property of the elements.

  • If the problem persists, we can further diagnose.

    By any chance are the elements destroyed and replaced elsewhere in the code (e.g. after an Ajax call)?
     
    Robert Ingmarsson
    Ranch Hand
    Posts: 195
    2
    Netbeans IDE PHP Java
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Best, Mr. Bibeault!

    Sorry for a late reply. The problem still occur. The script still only executes after a page load. I will definately consider using another approach
    with the addEventListener method.

    By the way, with "destroyed", are you refering to the method clearTimeout, i just realized I missed it out? What was your thoughts to this?

    Today I will look into an alternate approach.

    Best regards,
    Robert!
     
    Bear Bibeault
    Sheriff
    Posts: 67525
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    No, by destroyed I mean removing or replacing the elements.
     
    Robert Ingmarsson
    Ranch Hand
    Posts: 195
    2
    Netbeans IDE PHP Java
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Mr. Bibeault!

    Do you mean replacing and removing elements using dom?

    I am completely stuck here. My script will still only run one time per page load.
    It's almost fascinating to watch   It won't execute the method in the function call
    in the loop more than once.

    You mentioned something earlier about replacing the class names? I am using ids
    to find the divs. I know about getElementsByClassName.

    Has anyone encountered this phenomena before please give a comment or two.

    Regards,
    Robert!

     
    Bear Bibeault
    Sheriff
    Posts: 67525
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    id values have the disadvantage that you can only have one element with a specific id value, so that's not of any use to you in this case where you have multiple elements you wish to establish the event handler for. So class names are the appropriate mechanism.

    For example, you could use class="menu-item" on each element, then collect them all using getElementsByClassName.

    Then use addEventListener on each to establish the click handler.
     
    Robert Ingmarsson
    Ranch Hand
    Posts: 195
    2
    Netbeans IDE PHP Java
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Best ranchers!

    Thanks for all the replies here.

    I am just wondering what is the procedure to detect if a mouse pointer is outside
    a specific element such as a div tag?

    I am looking into pageX and pageY methods on google is that the correct approach?
    I wan't to be able to capture events when the mouse leaves my menu element.
    Is it possible to accomplish that?

    Best regards,
    Robert!
     
    Bear Bibeault
    Sheriff
    Posts: 67525
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Have you investigated the use of the mouseleave event?
     
    I'm so happy! And I wish to make this tiny ad happy too:
    ScroogeXHTML - a fast and small RTF to HTML5 and XHTML converter library
    https://coderanch.com/t/742149/ScroogeXHTML-RTF-HTML-XHTML-converter
    reply
      Bookmark Topic Watch Topic
    • New Topic