Изменить событие не стреляя

Question

Я клонировал таблицу (с выбором) для копирования в другое место. Это прекрасно работает, и мне удается сменить ID без забот. Проблема в том, что если я попытаюсь связать событие изменения с каждым из них, оно никогда не сработает? Здесь есть очевидная ошибка? Спасибо.

<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>

Answer 1

Измените false на true, чтобы скопировать обработчики событий с элементом DOM

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

В противном случае используйте событие live () для привязки:

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

Answer 2

Поскольку создается впечатление, что #popup_variants является родительским элементом в вашей таблице, вам лучше использовать .delegate()

$ (документ) .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");

});

Answer 3

Попробуйте связать функцию .change() после того, как вы подключили клон к DOM.