Change event not firing

I have cloned a table (with selects) to copy to somewhere else. This works great and I manage to change the ID's with no worries. The problem is that if I try to bind a change event to each of them, will it never fire? Is there a obvious mistake here? Thank you.

<script type="text/javascript">
            $(document).ready(function () {
                var variants = 开发者_如何学编程$("table.variantselection").clone(false);

                variants.find("select").each(function (i, o) {
                    $(this).attr("id", $(this).attr("id") + "_popup");
                });

                variants.find("select").change(function () {
                    alert($(this).val()); // never reaches this alert
                });

                variants.appendTo("#popup_variants");               
            });
        </script>

Change false to true to copy the event handlers with the DOM element

var variants = $("table.variantselection").clone(true);

Failing that, use the live() event to bind:

variants.find("select").live("change", function () {
    alert($(this).val());
});

Try binding the .change() function after you've reattached the clone to the DOM.

Since it appears that #popup_variants is the parent element on your table, you might be better off to use .delegate()

$(document).ready(function() {

$("#popup_variants").delegate("select", "change", function(){
  alert($(this).val());
});

var variants = $("table.variantselection").clone(false);

variants.find("select").each(function(i, o) {
    $(this).attr("id", $(this).attr("id") + "_popup");
});

variants.appendTo("#popup_variants");

});