Использование innerHTML нарушает функцию keyup

Итак, у меня есть текстовое поле:

number of weeks <div id = "weekcount"><input type="text" id="numweeks" name="numweeks" value="" class = "dialog_inputfield" /></div><br />

И функция Javascript, которая проверяет, изменяется ли значение в этом текстовом поле в любой момент:

$('#numweeks').keyup(function(event) {
        var date = $('#datepicker').val();
        var numWeeks = $('#numweeks').val();
        change(calculate(date, numWeeks));
});

И это прекрасно работает. Но я использовал innerHTML, чтобы изменить div с идентификатором «weekcount», чтобы он содержал другое текстовое поле, и я изменил его обратно на исходное текстовое поле с помощью:

document.getElementById('weekcount').innerHTML = '<input type="text" id="numweeks" name="numweeks"  value="" class = "dialog_inputfield" />'

После этого keyup больше не работает, хотя id такой же, как и раньше. Я что-то делаю не так? Спасибо.


javascript html innerhtml onkeyup
person shadowarcher    schedule 27.05.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В настоящее время вы привязываетесь непосредственно к элементу DOM, но это заменяется вашим назначением innerHTML, тем самым также теряется привязка события (это новый элемент DOM).

Что вы хотите, так это использовать делегированное ("живое") событие. Взгляните на функцию jQuery on, она прекрасно объединяет все шаблоны обработки событий.

$('#weekcount').on('keyup', '#numweeks', function(event) {
        var date = $('#datepicker').val();
        var numWeeks = $('#numweeks').val();
        change(calculate(date, numWeeks));
});
person Lucero    schedule 27.05.2013
comment
Хороший ответ. В эти дни использовал on для всех делегатов - person Ian Brindley; 27.05.2013