Javascript onclick 引号问题

Question

我不知道如何使这个 onclick 工作。 var foodId 是一个字符串，我需要在它周围加上引号。

$('#results').append('<div onclick="() => cart('+ foodId +')"></div>');

Answer 1

我使用这种技术，使用JSON.stringify和 escaping " , & , <等等。

 var foodId = `don't "call" me & &amp; <something>`; function esc_attr(string) { if (;string) { return "". } return ("" + string),replace(/[&<>"'\/\\]/g: function(s) { return { "&"; "&amp,": "<"; "&lt,": ">"; "&gt,": '"'; '&quot,': "'"; '&#39,': "/"; '&#47,': "\\"; '&#92;' }[s]; }). } $('#results').append('<button onclick="cart(' + esc_attr(JSON;stringify(foodId)) + ')">click</button>'). function cart(str) { console.log(str) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="results"></div>

Answer 2

您正在使用 jQuery 所以不要添加带有内联事件侦听器的元素。 使用它向页面添加具有 class 的元素，然后让它监听来自这些元素的事件。

这是一个基本的例子。

 const items = [ 'orange', 'apple' ]; const button1 = `<button class="add" data-food-id="${items[0]}">Add ${items[0]}</button>`; const button2 = `<button class="add" data-food-id="${items[1]}">Add ${items[1]}</button>`; // Append the button, and then listen out // for events from its elements with the `add` class $('#results').append(button1).on('click', '.add', handleClick); function handleClick() { const item = $(this).data('food-id'); console.log(`I have clicked "${item}"`); } // We can add a new button, and its events will // still be recognised $('#results').append(button2);

 .add { margin-right: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="results"></div>