jQuery append onclick

Question

I'm append html code using jquery append function. If on onclick I use function with one parameter - all right, but if I use function with multiple parameters I get error in console: SyntaxError: missing ) after argument list. My code:

var quote = quotes[i];
$('#quu').append('<div onclick="addBook('+quote.userId+', '+quote.book+')">'+quote.book+'</div>')

Function addBook:

function addBook(user_id, name) {
   alert(name);
   alert(user_id);
}

What I'm doing wrong?

KAD · Accepted Answer · 2016-03-12 11:09:29Z

4

You need to add quotes to the name quote.book since it shall be passed as a string parameter to the function addBook

$('#quu').append('<div onclick="addBook('+quote.userId+', \''+quote.book+'\')">'+quote.book+'</div>')

var quote = {userId : 1, book: "The GodFather"};

$(document).ready(function(){
  
  $('#quu').append('<div onclick="addBook('+quote.userId+', \''+quote.book+'\')">'+quote.book+'</div>');

});

function addBook(user_id, name) {
   console.log(name);
   console.log(user_id);
}

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

edited Mar 12, 2016 at 11:09

answered Mar 12, 2016 at 10:56

KAD

11.2k4 gold badges34 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kadzhaev Marat Over a year ago

yes, it help me, but now I get another error: Unexpected token ILLEGAL, why is so?

KAD Over a year ago

I have added a code snippet which is working properly, I really cant guess the ILLEGAL error unless you show us the full code

JEuvin · Accepted Answer · 2020-10-20 13:55:36Z

0

You don't append a function. You need to bind the function, you can do it using JQuery bind:

    $( "#foo" ).bind({
       click: function() {
         // Do something on click
       },
       mouseenter: function() {
         // Do something on mouseenter
       }
    });

answered Oct 20, 2020 at 13:55

JEuvin

1,0361 gold badge15 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery append onclick

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related