Dynamically created select menu on change not working

Question

I have a jsfiddle here - http://jsfiddle.net/FTHVJ/

And demo here - http://ttmt.org.uk/select

I know this looks a little crazy but it\'s cloest I could get t

Answer 1

For dynamically created elements, you need to use the .on function:

$('#new_select').on('change', '#menu_Two', function(){
    alert('here');
});

Event listeners can only be attached to elements that are in the DOM, not elements that don't exist at the time.

Answer 2

You shouldn't add the event handler until you've added the DOM node:

$(function(){

  var select_two = "<select id='menu_Two'>";
      select_two += "<option>Menu Two 1</option>";
      select_two += "<option>Menu Two 2</option>";
      select_two += "<option>Menu Two 3</option>";
      select_two += "<option>Menu Two 4</option>";
      select_two += "</select>";


  $('#menu_One').on('change', function(){
    $('#new_select').append(select_two);
    $('#menu_Two').on('change', function(){
      alert('here');
    })
  });
});

With fiddle: http://jsfiddle.net/cjcLU/

Answer 3

this is how I did it

$(document).on('change', "body", function(){
            $( ".ui-selectmenu" ).selectmenu();
        });

Answer 4

Try:

$(document).on('change', '#menu_Two', function(){
        alert('here');
      });

DEMO FIDDLE