jquery doesn't see new elements

Question

Hi, 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 the live event handler so that it applies the handler to new elements matching the selector.

$('#control').live( 'click', function() {
    DoSomething();
}):

However, live doesn't currently support the change event (as of 1.3.2) -- thanks @Sam for pointing that out. For now, you'll have to reapply the handler after adding the new element.

$(document).ready(function() {

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


     handleSelectEvent();
 });

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

Answer 2

With jQuery events if you want the event to apply to new elements you would use the .live method, however jQuery 1.3 doesn't support blur, focus, mouseenter, mouseleave, change, submit events as live events. (change, submit, and blur/focus are on the roadmap for jQuery 1.4)

As an alternative you could use the liveQuery plugin.

Answer 3

its implemented in my 1.3.2v :)

happy jquery guys