jQuery append onclick function doesn't work

Question

I have problem with append function. This code doesn't work properly.

$(element).append("<a onclick='test('test')'> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i></a>");

test function:

function test(value)
{
 alert(value);
}

I suspect that the problem is related to onclick function.

"This code doesn't work properly." is not a sufficient problem description. — PeeHaa, May 07 '16 at 14:17
Don't you see the problem with this portion of your code? `onclick='test('test')'` — Dexygen, May 07 '16 at 14:18
Take a look at your pages generated HTML and you will see the issue — Adjit, May 07 '16 at 14:19
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — whipdancer, May 07 '16 at 14:20

score 4 · Answer 1 · answered May 07 '16 at 14:24

You have to escape apostrophes inside:

 $(element).append("<a onclick='test(\"test\")'> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i></a>");

And make sure test() is defined globally (and not inside document ready for example).

Here is an example:

window.test = function(value){
 alert(value);
};
$('div').append("<a onclick='test(\"test\")'>click me</a>");

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

score 2 · Answer 2 · answered May 07 '16 at 14:25

As alluded to in the comments, you can't nest similar quote marks in a string like you are currently doing. You need to escape them with a back slash:

function test(value) {
 alert(value);
}

var element = $('body');

$(element).append("<a onclick='test(\"test\")'> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i>Click Me</a>");

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

score 1 · Answer 3 · answered May 07 '16 at 14:28

You're better off taking that inline JS out altogether and using jQuery to add the event listener (using event delegation because you're adding new elements to the DOM).

$(element).append('<a class="test">...');

$(document).on('click', '.test', function () {
  test('test');
});

Zohaib Ijaz · Answer 4 · 2016-05-07T14:26:14.780

0

Use ` quote instead of '

I created a jsbin here. II hope this is what you are trying to do

http://jsbin.com/wicanok/edit?html,js,output

$('#element').append("<a onclick='test(`test`)'> <i class='fa fa-spin fa-pencil' aria-hidden='true'>Hi</i></a>");

edited May 07 '16 at 14:26

answered May 07 '16 at 14:22

Zohaib Ijaz

19,906
6
35
55

score 0 · Answer 5 · answered Jan 13 '19 at 00:28

0

You can try this:

$(element).append("<a onclick='test('test')' class="your_class"> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i></a>");

$(document).on('click',".your_class", function(){
//Write here your code!
});

answered Jan 13 '19 at 00:28

Costas Bakoulias

679
6
9

jQuery append onclick function doesn't work

5 Answers5