0

I'm able to add a link dynamically on my page, but it doesn't seem to be a link recognized by my javascript code :

Javascript code to add the link :

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

Javascript code to access the link :

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

But when i click the new link created, there's no alert.

Do you have an idea how i can resolve the issue ?

Thanks in advance for your help

user708683
  • 500
  • 3
  • 9
  • 26
  • Use event delegation on() **[Event binding on dynamic elements](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements)** – Shaunak D May 13 '15 at 17:44

2 Answers2

1

Here's how you can do this with .on()

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

Note: This assumes that the #book element was already in the dom when the binding was set.

Update:

Since you're going to be adding other links, you'll need to use a common class to target those anchors:

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

Now you can target bind to those anchors like so:

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

Important Note: You cannot have duplicate id attribute values in your document - that would invalidate your html and cause unexpected behaviour in your JavaScript.

technophobia
  • 2,644
  • 1
  • 20
  • 29
0

You need to create your link before you bind the "click" event, otherwise it will not work.

Alternatively, using jQuery.live to bind to events of elements which might not exist on the page.

example:

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

tribe84
  • 5,432
  • 5
  • 28
  • 30