How do I print the original string for JavaScript function

Question

Here is my javascript example code using jquery

$(".class").append("<a class='button-link' onclick='myFunction('"+ p1 +"' , '" + p2 + "')'>Click Me</a>");

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

The result in HTML is like this

<a class="button-link" onclick="myFunction("p1' , 'p2')'></a>

But I want the result is like this

<a class="button-link" onclick="myFunction('p1' , 'p2')"></a>

Try using escaped double quotes for the onclick attr: $(".class").append("<a class='button-link' onclick=\"myFunction('"+ p1 +"' , '" + p2 + "')\">Click Me</a>"); — dotconnor
– dotconnor, Commented Oct 29, 2018 at 2:52

Dacre Denny · Accepted Answer · 2018-10-29 02:53:10Z

2

Try the following:

var p1 = 'p1';
var p2 = 'p2';

var myFunction = (a0,a1) => { console.log(a0, a1) }

$(".class")
    .append('<a class="button-link" onclick="myFunction(\'' + p1 + '\' , \'' + p2 + '\')">Click Me</a>');

console.log( $(".class").html() );

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

answered Oct 29, 2018 at 2:53

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2018-10-29 02:53:34Z

1

Inline handlers are generally considered to be pretty poor practice and are difficult to manage, in part due to quote-escaping issues like these. Rather than using an onclick attribute, attach the handler properly using Javascript, and it should be much easier to read, debug, and think about:

const a = $("<a class='button-link'>Click Me</a>");
a.on('click', () => myFunction('p1', 'p2'));
$(".class").append(a);

const a = $("<a class='button-link'>Click Me</a>");
a.on('click', () => console.log('foo'));
$(".class").append(a);

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

answered Oct 29, 2018 at 2:53

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

How do I print the original string for JavaScript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related