JQ event handler on a click

Question

I have some dynamically generated content that contains some links on an ajax call success. The links are generated like this.

$('#mySomething').append('<a href = "' + url + '" target = "_blank" class = "myclickclass">' + Name + '</a>');

I tried

$('a.myclickclass').click(), 
$('.myclickclass').click(), 
$('.myclickclass').on('click', 'a', function({})),

and even

$(document).on('click', '.myclickclass a', function (e) {} );

But nothing seems to happen. The new tab is opened, but the event is ignored.

Try like this, $('#mySomething a.myclickclass').click(); if you are sure that the anchor tag is appending. — Sravan, Jan 27 '16 at 09:08
The delegated approach (your last snippet) would work, but your selector is wrong. You should match `a.myclickclass` instead of `.myclickclass a`. — Frédéric Hamidi, Jan 27 '16 at 09:08
@Frederick Zhang I omitted the code from inside the event because it is not relevant to the question. — icebp, Jan 27 '16 at 09:09
I think your question answered [here](http://stackoverflow.com/questions/15090942/jquery-event-handler-not-working-on-dynamic-content) T — Qsprec, Jan 27 '16 at 09:11
Would you mind creating a [jsBin](https://jsbin.com/) with a minimal example? — nietonfir, Jan 27 '16 at 09:27

score 3 · Accepted Answer · edited Jan 27 '16 at 09:28

3

Use $(".myclickclass")[0].click()

You can directly attach an event to this new anchor.

$('body').append($('<a href = "http://www.google.de" class = "myclickclass">Test</a>')
        .click(function() {
            alert("Hey there");
        }));

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

The message is printed.

edited Jan 27 '16 at 09:28

konqi

5,137
3
34
52

answered Jan 27 '16 at 09:19

l1e3e3t7

124
11

score 1 · Answer 2 · answered Jan 27 '16 at 09:17

1

delegated event must work

$(document).on('click', '.myclickclass', function (e) {

alert("yes")

} );

answered Jan 27 '16 at 09:17

Amar Singh

5,464
2
26
55

score 0 · Answer 3 · answered Jan 27 '16 at 09:31

var url = 'http://www.google.com';
var Name = "Link";
$('#mySomething').append('<a href = "' + url + '" target = "_blank" class = "myclickclass">' + Name + '</a>');

$('a.myclickclass').on('click',function(){
     console.log('link clicked');
     
    })

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

Something like this?

JQ event handler on a click

3 Answers3