Не определяет событие при выборе селектора, как правильно отловить это событие?

Question

[VitaliySm]

$('#id-category').bind('change', function() {
    selected = $('#id_1-category option:selected').val();
    if (selected != ''){
        $.get('/get/?category=' + selected, function(data) {
        $('#make_container').html(data);
        });
    }
});

$('#make_container').bind('change', function() {
    console.log('----')
    }
});

Есть первый селектор когда, мы вибираем там категорию, формируется селектор для второго инпута, пролема в том, что почему-то не отлавливает изменение этого новосозданного селектора

Answer 1

[Evgeny Svirsky]

Проблема очевидна. Вы используете неверную конструкцию чтобы отловить событие динамически созданного элемента. Вот тут можно почитать:
api.jquery.com/on
Вам нужно использовать Delegated events.
Нужно использовать вот так:

$( "body" ).on( "change", "#make_container", function() {
   console.log('----')
});

Scope "body" - можно уменьшить до отслеживаемого контейнера...

Answer 2

[Виктор]

убедитесь что у вас работает бинд. Если нет, лучше заменить его на конструкцию .on()

Comments

[VitaliySm]

работает, в первом же случае отловило изменение селектора, при выборе категории. конструкция .on() тоже не работает. когда пробую этот код через консоль браузера - все работает.

[Михаил Чирский]

VitaliySm: смотрим в сторону api.jquery.com/delegate