Jquery Grabbing id of a select where there is more than one select with the same class name

I have a form that has elements cloned using jquery. So there could multiple <select> with the same class name but different id eg. <select name="ticket1" id="ticket1" class="ticket">

The choice from a select shows/hides a <div id="hide1" class="hide">...</div> This jquery code...

$(document).ready(function(){
  $('.hide').hide();
  $('select.ticket').change(function(){

    var hideNo=this.id.substr(6);
   console.log('This='+this);    //debug for firebug
   console.log('Id='+hideNo);//debug for firebug
    console.log('Value='+this.value);//debug for firebug
开发者_JAVA百科    $('#hide'+hideNo).toggle(this.value == 'child'||this.value == 'youth');
  });
  $(".ticket").change();
});

Works for the first id, but not any subsequent ones.

Whay am I doing wrong please?

Try changing the third line in your code above to:

$('select.ticket').live("change", function(){

Either use live() or delegate() so the event handler works for any elements that match the selector currently or added in the future.

Another option, if you are using the built in .clone() method. You can use .clone(true) to clone any data and events tied to that element.