Как добавить строку одинарной кавычки в функцию добавления jquery?

Question

Я хочу добавить элементы в тело HTML, но у меня проблема. функция onclick не работает, потому что я ошибся в функции. ниже приведен код добавления в моем html

var html= "<button class='btn fab-success' type='button' onclick='openTabGeneral('tab_map', 'Web GIS', 'client/map/index.html', 'Get', 'yes')'>Click</button>";
$("body").append(html);

результат этого html кода

onclick="openTabGeneral(" 'tab_map'',''webgis'',''client/map/client="" map="" index.html'',''get'',''yes'')'=""

я хочу получить такой результат

onclick="openTabGeneral('tab_map', 'webgis', 'client/map/index.html', 'get', 'yes')"

скажите, пожалуйста, как изменить код следующим образом ^

Answer 1

Краткосрочное исправление - экранирование кавычек в атрибуте, который вы создаете в строке HTML:

var html = '<button class="btn fab-success" type="button" onclick="openTabGeneral(\'tab_map\', \'Web GIS\', \'client/map/index.html\', \'Get\', \'yes\')">Click</button>';
$("body").append(html);

function openTabGeneral() {
  console.log(arguments);
}

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

Однако , гораздо лучший подход состоит в том, чтобы создать элемент вручную и использовать на нем ненавязчивый обработчик событий, который позволяет избежать проблемы полностью. Для этого вы можете использовать делегированный обработчик событий и атрибуты data, например:

$(document).on('click', 'button', function() {
  console.log($(this).data()); // all arguments
  console.log($(this).data('arg1')); // specific argument
});

$('<button />', {
  'class': 'btn fab-success',
  'type': 'button', 
  'text': 'Click',
  'data-arg1': 'tab_map',
  'data-arg2': 'Web GIS',
  'data-arg3': 'client/map/index.html',
  'data-arg4': 'Get',
  'data-arg5': 'yes' // this should probably be a boolean, not a string
}).appendTo('body');

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