jquery doesn't see new elements

jquery dom refresh
Peter picture Peter · May 2, 2009 · Viewed 28.5k times · Source

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

tvanfosson picture tvanfosson · May 2, 2009

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

Related questions

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More
How do I set/unset a cookie with jQuery?

How do I set and unset a cookie using jQuery, for example create a cookie named test and set the value to 1?

Read More