Question

Here is the situation :
I have a vertical menu with div. Each div has an id. When I click on a div, it adds a select list within the div using the following method :

$ ( '#mydiv' ).on ( 'click', function ( ) {
  var select = '<select name="menuList"><option value="test">test</option>...</select>';
  $ ( '#mydiv' ).html ( select );
} ) ;

What I am trying to do is simple. I would like to define the user choice as a text when the option has been selected. I have tried this but it doesn’t work :

$ ( 'select[name="menuList"]').on ('blur', function ( ) {
  $ ( '#mydiv' ).html ( $ ( 'select[name="menuList"] option:selected' ).val ( ) );
} );

Moreover, the other problem is that when I choose an option from the list, the selected field doesn’t remain the user choice, it goes back to the first position of the list. Basically, the problem is not a real one because I immediately replace the list by a text field containing his choice but I’d like to understand why this is happening.

Answer 1

Because you are setting the HTML (destructively) on the click event, every time you click the div the html is replaced. You’d be better setting the html on document.ready and them using hide / show or creating a flag which you set when the content is set and checking it each click so you know not to re-create the menu.