jQuery字符串串联'+'错误

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 ?

Answer 1

尝试这个

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

Answer 2

 $('.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 \\ .

Answer 3

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

Answer 4

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': '123@gmail.com'}, {'email': 'xyz@gmail.com'}]; 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> 

Answer 5

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

Answer 6

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.