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: n/a

5 Years
Discussion Span
Last Post by 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


This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.