Как напечатать исходную строку для функции JavaScript

Question

Вот мой пример кода javascript с использованием 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>

Результат в HTML такой:

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

Но я хочу, чтобы результат был таким

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

Answer 1

Встроенные обработчики, как правило, считаются довольно плохой практикой и ими трудно управлять, отчасти из-за проблем с кавычками, подобных этим. Вместо использования атрибута onclick правильно подключите обработчик с помощью Javascript, и его будет намного легче читать, отлаживать и думать о:

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>

Answer 2

Попробуйте следующее:

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>