dom - jquery doesn't see new elements

Question

I am new to JQuery, so bear with me :).

I have a simple problem:

$(document).ready(function() {

     $("#instrument").change(function() {
         $("#tunings").html("<select id="TuningSelector>"[..]</div>");
     });

     $("#TuningSelector").change(function() {
         DoSomethingWithTheValue();
      }); 

 });

Problem is: When instrument has changed, the script doesn't respond anymore to TuningSelector changes. Like JQuery doesn't see the new TuningSelector element...

Do I need to call a refresh on JQuery or so? So that it sees the refreshed DOM?

Answer 1

Generally you want to use on so that it applies the handler to new elements matching the selector and delegate to a higher element in the DOM.

$('body').on( 'change', '#control', function() {
    DoSomething();
});