Question

这是我使用jquery的javascript示例代码

$(".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

尝试以下操作：

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>

Answer 2

内联处理程序通常被认为是相当差的做法，并且难以管理，部分原因是由于此类引号转义问题。与其使用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>

如何为JavaScript函数打印原始字符串

2 个答案: