jQuery - Dynamically created select menu on change not working

JavaScript
1

Hi all

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 to the actual code.

I have an on ‘change’ event handler on a select menu #menu_One

This then adds a new select menu #menu_Two that is saved in jquery as a variable.

I’m then trying to add an on ‘change’ event handler to this added select menu.

The on ‘change’ event doesn’t work on thw added select menu.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <!--jQuery-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


  <!--css-->

  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    body{
      background:#eee;
    }
    #wrap{
      max-width:800px;
      margin:0 auto;
      background:#fff;
      height:1000px;
      padding:50px;
    }
    #new_select{
      height:50px;
      margin:20px 0 0 0;
      padding:10px 0 0 0;
      background:red;
    }
  </style>

  <title>Title of the document</title>
  </head>

<body>

  <div id="wrap">

    <select id="menu_One">
      <option>Menu One 1</option>
      <option>Menu One 2</option>
      <option>Menu One 3</option>
      <option>Menu One 4</option>
      <option>Menu One 5</option>
    </select>

    <div id="new_select">
    </div>
  </div>

</body>

  <script>

    $(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');
      })

    });

  </script>

</html>
2

Hi,

the problem here is that $('#menu_Two') doesn’t exist when your script executes, so you cannot attach an event handler to it.

Change this:

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

to this:

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

and that should work.

Let me know how you get on.

3

Thanks Pullo, that worked.