SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - Dynamically created select menu on change not working

    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.


    Code:
    <!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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    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:

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

    Code:
    $('#wrap').on('change', '#menu_Two', function() {
      alert('here');
    });
    and that should work.

    Let me know how you get on.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, that worked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •