Событие изменения jquery на внешнем компоненте select

Question

У меня есть несколько селекторов, которые я построил как внешние компоненты на странице php, а затем загрузил в html-страницу. Например, я, вероятно, буду использовать компонент usersList в нескольких местах по всему сайту, поэтому мой php генерирует этот список, а затем я использую load in jquery для вызова компонента, например:

$("#samaritan").load('usersList.php');

Это прекрасно работает, и я могу написать jquery в содержащем документе, чтобы получить val () из моего usersList просто отлично. Я хочу, чтобы все происходило в зависимости от этого списка. Единственная проблема заключается в том, что событие change, похоже, хочет запускаться только тогда, когда код jquery находится на той же странице, что и исходный компонент. Например, следующий код вызовет предупреждение со значением раскрывающегося списка, когда я изменю выбор только тогда, когда этот код находится на странице php, которая генерирует выбор.

$("select").change(function() {
                alert("you chose "+$(this).val());
            });

Я бы предпочел не писать этот код прямо на странице компонента. Мне бы хотелось, чтобы поведение было разным в разных местах, где я его использую. Я пытался использовать .blur, но я получаю тот же результат. Любые идеи, как вызвать событие изменения для выбора из документа, содержащего выбор, который загружен в div?

Answer 1

Звучит так, будто вы запускаете код для добавления обработчика до того, как элемент фактически добавляется в DOM. Убедитесь, что ваш код jQuery, добавляющий обработчик, выполнен после того, как функция загрузки завершит свою работу. Когда вы перезагрузите список, вам нужно будет повторно применить обработчик. Самый простой способ сделать это - применить обработчик в обратном вызове метода load. К сожалению, вы не можете использовать live handlers , так как они не поддерживают событие change.

$("#samaritan").load('usersList.php', function() {
    $("select").change(function() {
        alert("you chose "+$(this).val());
    });
});