Click function on appended link does not work

Question

On clicking a link, I want to display a div and append another link in that div. Then I want to use click function on the appended link.

In my code below the click function on the link 'click' does not work. I am unable to figure out the problem. I will appreciate any help.

Please check the JsFiddle to see the problem.

Demo: http://jsfiddle.net/QYL3x/

jQuery:

$('.big-link').click(function(e){
    $('#myDiv').append('<a class="link" href="#">Click</a>');
});


$('.link').click(function(e){
    alert("clicked");
});

HTML:

<a href="#" class="big-link" data-reveal-id="myDiv">Fade</a>
<div id="myDiv" class="reveal-modal"></div>

use $('.link').live('click',function(){}) OR $('.link').on('click',function(){}); [YourFiddle](http://jsfiddle.net/QYL3x/11/) — Ali Exalter, Oct 23 '13 at 10:07
The `.click()` event binding was already executed when the JavaScript file was parsed and run by the browser. It didn't find your `.link` element because it didn't exist yet. You need to change the way in which the `.link` element binding works - see [`.on()`](http://api.jquery.com/on/) — andyb, Oct 23 '13 at 10:07
@AliExalter [`.live()`](http://api.jquery.com/live/) was removed in jQuery 1.9 — andyb, Oct 23 '13 at 10:08
and [Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/218196) — Felix Kling, Oct 23 '13 at 10:08
@andyb I know But he is using 1.8.3 in fiddle. For 1.9 use .on() here is link to 1.9 example [jSFiddle1.9](http://jsfiddle.net/QYL3x/12/) — Ali Exalter, Oct 23 '13 at 10:13
@AliExalter Fine. `.live` was _deprecated_ in 1.7. `.on` was introduced in 1.7. `.on` is the correct function to recommend from 1.7 onwards — andyb, Oct 23 '13 at 10:14

score 11 · Accepted Answer · answered Oct 23 '13 at 10:06

11

You need to use a delegated event handler. This is because your current code is trying to attach an event to .link before it exists in the DOM.

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

Updated fiddle

answered Oct 23 '13 at 10:06

Rory McCrossan

331,213
40
305
339

Rituraj ratan · Answer 2 · 2013-10-23T10:11:44.617

3

use .on

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

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

see demo

edited Oct 23 '13 at 10:11

answered Oct 23 '13 at 10:05

Rituraj ratan

10,260
8
34
55

2

wrong syntax and wrong selector ... – Gabriele Petrioli Oct 23 '13 at 10:07

score 1 · Answer 3 · answered Oct 23 '13 at 10:08

1

jQuery.click function is binded to the elements that are present in the DOM. You need to add a delegate event listener:

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

answered Oct 23 '13 at 10:08

matewka

9,912
2
32
43

score 1 · Answer 4 · answered Oct 23 '13 at 10:12

Rory's solution is perfect. Also, there is one more variant which I use generally, that don't need delegation. This is binding the event when you create the element.

$('.big-link').click(function(e){
    $('#myDiv').append(
       $('<a/>' { 
           'class' : 'link' ,
           'href'  : '#' , 
           'click' : function(){ alert  ( 'hi' ); }
       } )
     );

score 0 · Answer 5 · answered Oct 23 '13 at 10:08

0

working sample: http://jsfiddle.net/QYL3x/1/

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

just add delegation

answered Oct 23 '13 at 10:08

doniyor

36,596
57
175
260

score 0 · Answer 6 · answered Oct 23 '13 at 10:08

Use

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

OR

http://jsfiddle.net/QYL3x/2/

$('.big-link').click(function(e){
    var link = $('<a class="link" href="#">Click</a>');
    link.click(function(e){
        alert("clicked");
    });
    $('#myDiv').append(link);
});

Click function on appended link does not work

6 Answers6