Javascript : почему не обрабатывается событие для вновь созданного элемента.

да потому что вы же сами написали такой код, который при загрузке документа добавляет всем input реакцию на mouseover. а когда вы добавляете новый input, он уже никак не может обработаться этой функцией. Вам просто надо для каждого нового input устанавливать это событие, тем более, id нового элемента известен.

Это известная богофича джейквери.

пользуйтесь jQuery(elmnt).find

или, как вариант, используйте дерево от корня

proksey-net, Спасибо, ваш совет помог, сделал так

$("#answer").click(function () {

                $("li:last").after('<li> <input type="text" id="answ' + a_count + '" size="40"></li>');

                a_count++;

                $('input').mouseover(function(){

                    $(this).css("background", "red")

                    //alert('Вы поместили курсор в зону элемента foo.');

                });

                $('input').mouseout(function(){

                    $(this).css("background", "white");

                    //alert('Вы поместили курсор в зону элемента foo.');

                });



            });

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

---------- Добавлено 08.05.2015 в 12:41 ----------

silicoid, А можно поподробнее? возможно будет более красивое решение?

silicoid, и в чём же здесь баг?

более красивое решение - это действительно вынести в отдельную функцию. Но заставить JavaScript обрабатывать вновь созданные элементы автоматически - невозможно🙅

Если я правильно понял написанное Вами - вполне себе возможно. Вот так:

 $(document).on('mouseover', 'input', function(){
                alert('Вы поместили курсор в зону элемента foo.');
            });

Рабочий пример jsfiddle

Для старых версий jquery ниже jQuery 1.7 стоит использовать delegate

$(document).delegate('input', 'mouseover', function(){
       alert('Вы поместили курсор в зону элемента foo.');
}); 

Все дело в том, что при подгрузке документа Jquery слушает DOM, который был создан изначально. А append происходит уже после полной загрузки. $(document).ready(). Поэтому для самого Jquery Dom не обновляется.

Кстати $(function () {}) после $(document).ready() лишние. Т.к. это по сути своей одно и то же.

Comodo, Вы гений!!! Спасибо! получается вообще коротко и все работает!

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

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