jQuery String concatenation '+' error

Question

I have a jQuery statement

 $('.searchDisplay').append('<i class="ion-email" onclick="copyEmail('+data[i].email+')"></i>' );

Here if I click this icon then this function copyEmail() is called which takes a string as an argument and adds it to the clipboard.

But when I click on the icon I get an error in my console

Uncaught SyntaxError: Invalid or unexpected token

then I tried doing it this way

$('.searchDisplay').append('<i class="ion-email" onclick="copyEmail("'+data[i].email+'")"></i>' );

I got this error

Uncaught SyntaxError: Unexpected token }

The problem is that I'm not able to pass a string in function.

Can someone slove this for me ?

I don't believe your problem is in the posted code, please edit question and post the function 'copyEmail', and check the reported line number from the console where the SyntaxError comes up — Kickass
– Kickass, Commented Mar 4, 2018 at 9:51

void · Accepted Answer · 2018-03-04 09:53:42Z

1

 $('.searchDisplay').append('<i class="ion-email" onclick="copyEmail(\''+data[i].email+'\')"></i>' );

Problem in your code was...

When you call a function with string as an argument you do someFunction('somestring');, in your code you are missing the '' wrapping the string.

So you need to wrap data[i].email with ' .. '. I have wrapped the data[i].email with '' but as there was already one pair so I had to escape it with \.

edited Mar 4, 2018 at 9:53

answered Mar 4, 2018 at 9:47

void

36.8k10 gold badges72 silver badges111 bronze badges

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

1 Comment

Sandeep Ranjan Over a year ago

Can you explain to me what was the problem?

Prasanta Bose · Accepted Answer · 2018-03-04 09:47:50Z

1

Try this

$('.searchDisplay').append('<i class=\"ion-email\" onclick=\"copyEmail(\"'+data[i].email+'\")\"></i>' );

answered Mar 4, 2018 at 9:47

Prasanta Bose

6745 silver badges13 bronze badges

Comments

Luis Gar · Accepted Answer · 2018-03-04 09:51:26Z

1

You should use "\" to avoid the errors, so you can make this:

$('.searchDisplay').append('<i class="ion-email"  onclick="copyEmail(\''+data[i].email+'\')"></i>' )

Edited

answered Mar 4, 2018 at 9:51

Luis Gar

4711 gold badge6 silver badges19 bronze badges

Comments

Mamun · Accepted Answer · 2018-03-04 10:14:09Z

1

You do not need to wrap data[i].email with '+ +' at all in your function argument:

$('.searchDisplay').append('<i class="ion-email" onclick="copyEmail(data[i].email)"></i>' );

var data = [{'email': '[email protected]'}, {'email': '[email protected]'}];
var i = 1;
$('.searchDisplay').append('<i class="ion-email" onclick="copyEmail(data[i].email)">Click To Test</i>' );

function copyEmail(email){
  console.log(email);
}

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

edited Mar 4, 2018 at 10:14

answered Mar 4, 2018 at 9:57

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Jeremy Jones · Accepted Answer · 2018-03-04 09:52:00Z

0

You're better to give it an id, or another identifying attribute, and then add the onClick handler after appending it, when it's available in the DOM, along the lines of:

$('.searchDisplay').append('<i id="num' + i + '" class...></i>');
$('#num' + i).on('click', 
                 function () {
                     ...
                 });

Or hook into all of them at once by selecting the .searchDisplay class. You can use $(this) in the function to determine which one was clicked.

answered Mar 4, 2018 at 9:52

Jeremy Jones

5,7614 gold badges23 silver badges28 bronze badges

Comments

codejockie · Accepted Answer · 2018-03-04 09:53:19Z

0

$('.searchDisplay').append(`<i class="ion-email" onclick="copyEmail('${data[i].email}')"></i>`);

edited Mar 4, 2018 at 9:53

answered Mar 4, 2018 at 9:51

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

1 Comment

Alexander Over a year ago

While this code may answer the question, providing additional context regarding how and why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

jQuery String concatenation '+' error

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related