Создать ссылку с jquery

Question

Почему ссылка не работает, если ссылка создана с помощью javascript? Это работает только если я делаю ссылку без вывода HTML()

не работает

$(".link").on('click', function(){ 
    alert('Hello'); 
}); 

$("#link").html('<a href="#" class="link">Link</a>'); 

<div id="link"></div> 

Working

$(".link").on('click', function(){ 
    alert('Hello'); 
}); 

<a href="#" class="link">Link</a> 

Answer 1

Ваш код не работает, потому что событие связано, когда элемент не существует в DOM

1. Оберните свой код в ready или переместить код на внизу body, поэтому ваш код будет работать, когда DOM полностью разобран
2. Использование event delegation связать событие динамически создаваемых элементов. (Это сделает первый вариант выше опционального)

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

$(document).ready(function() { 
 
    $("#link").on('click', '.link', function() { 
 
    $("#link").append('<a href="#" class="link"> Link </a>'); 
 
    }); 
 

 
    $("#link").html('<a href="#" class="link">Link</a>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="link"></div>

Answer 2

Изменить порядок вызовов. Элемент с классом .link еще не существует в DOM, когда вы прикрепляете обработчик. Вы должны добавить ссылку через вызов html на div, прежде чем вы сможете прикрепить к нему обработчик с помощью метода on. Ниже приведен полный рабочий пример.

$("#link").html('<a href="#" class="link">Link</a>'); 
 

 
$(".link").on('click', function(){ 
 
    alert('Hello'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="link"></div>