jquery created select, and triggering on change

Question

I cannot seem to get this to work. I am using jquery to create an html select, and I want some code to execute when its value changes.

code follows:

<script type ="text/javascript">

   var firstweddingturn = '400';

   $('#weddingturn').change(function() {

      alert ("Wedding select change triggered!");

      //var wedturn = $('#weddingturnselectid').val();
      //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')

    });


    $(document).ready(function() {

      var html = [];
      html[html.length] = '<select name="weddingturn" id="weddingturn">';
      var a = firstweddingturn;
      var b = Number(firstweddingturn) + 16;
      while (a < b) {
        // do some code
        html[html.length] = '<option name="asdf" value = "1">' + a + '</option>';
        a++;
      }  // end while
      html[html.length] = '</select>';
      $('#div1').append(html.join('')); 

    });
</script>

What am I doing wrong?

Answer 1

You need to use .delegate() (or .live() ) since you are adding the select dynamically. When you attach an onChange handler with .change() it is only attached to existing matching elements, not elements which are added later on. To attach an event to all matching elements including those added to the page later, you use the .delegate() function, like this:

$('body').delegate('#weddingturn','change', function(){
  alert('Wedding select changed to ' + $(this).find('option:selected').val() );
});

However, as some people point out, you can merely attach the event handler immediately after adding the <select> to the DOM. That way, you can still use .change() and your code should run faster.

Answer 2

Include this:

 $('#weddingturn').live('change', function() {

        alert ("Wedding select change triggered!");

        //var wedturn = $('#weddingturnselectid').val();

        //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')

    });

in your $(document).ready

And change it to use live

Answer 3

When the .change() event is bound, the element does not exist yet. You have 2 choices:

1. Bind the event after you create the element ( the simplest and recommended option )
2. Use .delegate() (or .live() ) to tell jQuery to bind the event to any element matching the selector whenever it is added to the DOM. If you choose this option, delegate() is the preferred method if you are using a recent version of jQuery > 1.4.2 since it is more performant than live() .

Answer 4

your are dynamically adding the select to the DOM, at the time of declaration of your event handler the select doest not exists so the event handler doesn't get binded to the element use .live to attach the event handler to dynamically added element

$('#weddingturn').live('change',function() {

        alert ("Wedding select change triggered!");

        //var wedturn = $('#weddingturnselectid').val();

        //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')

    });

DEMO

jquery live

Answer 5

You'll need to bind using live , since it is loaded post-DOM load:

$("#weddingturn").live("change", function() {

});

Also, I would place this within scope of $(document).ready , preferably after the code which loads it (just for the sake of logical linearity.)

Answer 6

You're hooking up the event handler BEFORE you've created the element.

(you can use .live() or you can just swap the order of operations)

Answer 7

You are setting the change function on a select that does not yet exist. Move that .change call to after the .append