Как правильно добавить события к динамически создаваемым элементам?

333

04 марта 2017, 04:44

Исользую jquery. Мне нужно сделать, чтобы при наведении на любую ссылку в документе, отображалось бы - alert("ссылка").
Изначально, в документе, у меня уже есть одна ссылка - <a>Первая</a>. Для неё я при загрузке добавляю событие - $("a").hover(function(e) {alert("ссылка"); }). Далее при наведение на эту ссылку событие отрабатывает нормально. Но после добавлении ссылок динамически (событие - $("a").click) на новых ссылках событие не срабатывает.

Код страницы:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Nexus</title>
    <script type="text/javascript" src="jq.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
        $("a").click(function(e) {
            $("body").append("<a>Остальные</a>");
        })
        $("a").hover(function(e) {alert("ссылка"); });      
    });
    </script>
    </head>
    <body>
        <a>Первая</a>
    </body>
</html>

Подскажите, пожалуйста, как сделать, чтобы событие $("a").hover отрабатывало на все ссылки, в том числе и динамически, в том числе и на добавленные после загрузки документа?

Answer 1

@vvtvvtvvt, по сути, вам уже ответил @artem328, но только он почему-то поленился рассказать, что для динамических элементов используется делегированная обработка собятий, и схематически это выглядит так:

$('parent_static').on('event', 'children_dinamic', handler);

Где parent_static - это статичный родительский элемент (лучше ближайший, но подойдёт и body), event - событие, children_dinamic - дочерний динамический элемент, на котором обработчик и должен сработать. При этом указатель this или объект jQuery $(this) в обработчике - имено дочерний динамический элемент.

Answer 2

Вот как-то так

Answer 3

Вы привязываете события к ссылкам только при загрузке страницы, когда только одна ссылка существует. Решением будет привязывать события каждый раз, когда добавляется ссылка.

    <html>
    <head>
    <meta charset="UTF-8">
    <title>Nexus</title>
    <script type="text/javascript" src="jq.js"></script>
    <script type="text/javascript">
       function clck(){
        $("body").append('<a onclick="clck()" onmouseover="hover()">Остальные</a>');
       }    
       function hover(){        
        alert("ссылка");    
       }
    </script>
    </head>
    <body>
        <a onclick="clck()" onmouseover="hover()">Первая</a>
    </body>
</html>

jsFiddle