Member Avatar for minitauros

On my site there is a horizontal menu. When I hover over a menu button, which is a <div>, a <div> inside that <div> is shown with control options for that button (for example to edit the button text). This is done with Javascript (jQuery). It uses $.hover.

So, when I click the "edit button text" button in the <div> that shows when I hover over the menu button, the inner content of the menu button <div> is changed to a text field through AJAX, so that I can edit the button's text. The hover <div> is not replaced when the AJAX load is performed.

The problem lies here: When I edit the text inside the text field and press [enter], the text field is replaced by the new button text through a new AJAX load. When I press [enter] while my mouse is hovering over the textfield, the hover functionality breaks: the <div> with control buttons now flickers when I hover over the menu button <div>. However, when I press [enter] while typing in the text field, while my mouse is NOT hovering over the text field, the hover functionality is kept intact.

Any suggestions on how to fix this? :)

Edited by minitauros because: n/a
  • 2 Contributors
  • 1 Reply
  • 173 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Easy, two choices:

  1. Don't replace the button, just change the properties of the existing button.
  2. Attach the hover etc. functionality to the new button

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.