JQuery doesn't apply to elements created after page load

If I call this:

$(".month-selector").change(function(){
    setStones();
});

Inside the$(document).ready() it does not apply to elements that are created later. I also tried calling the above code after creating them like so:

$("#month-selectors").html(month_selectors);

$(".month-selector").change(function(){
    setStones();
});

It still doesn't work. However, If I create a static one, it works.

How ca开发者_如何学Gon I apply this to the elements when I create them after the page loads?

You can use jQuery's 'live()' method to add event listeners to current and future nodes.

$(".month-selector").live('change', function(){
    setStones();
});

That was super helpful! However, on in case you are adding an input event after the DOM has loaded you will need to use the "click" event to get it to work:

  $("input#thename").live("click", function(event) {
// handler for what should happen when somebody clicks on the new input field, in this case I needed a datepicker to pop up so lets get that fired. Now that the click element registered the new input object with the DOM, it can be used like a normal jQuery selector!
    $("input#thename").datepicker();
    });

try:

$(".month-selector").live("change", function(event) {
 // some code
});