jQuery 'focus' событие не работает для динамически генерируемого элемента

Question

Я генерирую динамически

<input type="text" id="foo">
<label for="foo">

И установите слушателя на вход:

updateWithLabelInputs($("#foo"));

И функция:

function updateWithLabelInputs(withLabel) {
    withLabel.die("focus").live("focus", function (e) {
        $(this).parent().find('label').hide();
    });
    withLabel.die("blur").live("blur", function (e) {
        if ($(this).val() == '') {
            $(this).parent().find('label').show();
        }
    });    
}

Когда я нажимаю на ярлык, я ожидаю, что событие сработало, но это не так. Интересно: если тот же слушатель применяет к существующему (не динамически) html - это работает. В чем проблема? Почему слушатель не работает для динамически элементов?

Answer 1

Я хотел бы увидеть весь ваш код, где вы создаете элемент и присоединяете к нему событие. Я думаю, что вы не делаете это в правильной последовательности:

Обработчики событий связаны только с выбранными в данный момент элементами; они должны существовать на странице в тот момент, когда ваш код вызывает.on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните привязку событий внутри обработчика готовых документов для элементов, которые находятся в разметке HTML на странице. Если на страницу внедряется новый HTML, выберите элементы и прикрепите обработчики событий после того, как новый HTML будет помещен на страницу. Или используйте делегированные события, чтобы присоединить обработчик событий, как описано далее.

Более ранняя версия: вам нужно https://github.com/brandonaaron/livequery чтобы сделать что-то подобное. Или, если вы открыты для использования более поздней версии jQuery, без die а также live, используйте .on и .off