Добавить ссылку динамически с помощью JQuery

Question

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

кода

Javascript, чтобы добавить ссылку:

var myLink = $('<a>',{ 
        text: 'My Link', 
        id : 'link-1', 
        href: '#' 
       }).appendTo('#book'); 

код Javascript, чтобы получить доступ к ссылке:

$("#link-1").click(function() { 
      alert('link-1 clicked'); 
     }); 

Но когда я нажимаю на новую ссылку, созданную, нет предупреждения.

У вас есть идея, как я могу решить проблему?

Заранее спасибо за помощь

Answer 1

Вам нужно создать ссылку, прежде чем связать «нажмите кнопку» событие, в противном случае он не будет работать.

Альтернативно, используя jQuery.live для привязки к событиям элементов, которые могут отсутствовать на странице.

пример:.

$ ("# ссылка-1") жить ('нажмите', функция() { оповещения ('ссылка-1 щелкнул'); });

Answer 2

Вот как вы можете сделать это с .on()

$('#book').on("click", "#link-1", function (e) { 
    alert('link-1 clicked'); 
}) 

Примечание: Это предполагает, что #book элемент был уже в йот, когда связывание был установлен.

---

Update:

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

var myLink = $('<a>',{ 
        text: 'My Link', 
        class : 'my-anchor', // <-- notice I replaced id with class 
        href: '#' 
       }).appendTo('#book'); 

Теперь вы можете мишень привязывается к таким якорям следующим образом:

$('#book').on("click", ".my-anchor", function (e) { 
    alert('my-anchor clicked'); 
}) 

Важное примечание: Вы не можете иметь дубликаты значений id в своем документе - это приведет к аннулированию вашего html и приведет к неожиданному поведению в вашем JavaScript.