Не удалось отправить некоторые данные внутри onClick

Question

Я не понимаю, почему я не могу отправить значение другой функции внутри моего onClick.

У меня есть это,

function centerMapInfo(data){
    console.log(data);
}

$(document).ready(function() {
    ...
    console.log('START');
    for (let i = 0; i < data.length; i++) {
        ....
        centerMapInfo(data[i])
        $("#"+id_list).append("<li class='"+li_class+" list-group-item-warning font-weight-bold'><a href='#' onclick='centerMapInfo("+data[i]+");return false;'>"+data[i].dev_name+"<span class='"+span_class+"'>"+data[i].fleet_name+"</span></li>")
    ...
});

Эти данные JSON (Я не знаю, важно ли это) Я не понимаю, почему, когда я отправляю его в одиночку centerMapInfo(data[i]), он работает отлично, но когда я отправляю его, когда нажимаю на ссылку, onclick='centerMapInfo("+data[i]+"); происходит сбой.

Ошибка:

Uncaught SyntaxError: Неожиданный идентификатор

Тогда я понимаю, что отправляю сообщение неправильно, потому что ошибаюсь, как его написать (возможно, это глупо, но я могу » не вижу это). Может ли кто-нибудь мне помочь?

Большое спасибо!

Answer 1

Вы пробовали?

onclick='centerMapInfo(\””+data[i]+"\”);

Answer 2

Позвольте data быть глобальным и обращаться к нему внутри функции, используя только индекс. Также вместо использования onclick, привязать обработчик события к элементу.

var globalData;

function centerMapInfo(index){
  console.log(globalData[index]);
}

$("body").on("click", "li.fleet", function(ev) {
  centerMapInfo(parseInt(ev.target.dataSet.index));
  ev.preventDefault();
});

$(document).ready(function() {
  ...
  console.log('START');
  globalData = data;
  for (let i = 0; i < data.length; i++) {
    ....
    centerMapInfo(i)
    $("#"+id_list).append(
      `<li class='${li_class} list-group-item-warning font-weight-bold fleet' 
           data-index='${i}'>
         ${data[i].dev_name}
         <span class='${span_class}'>
           ${data[i].fleet_name}
         </span>
      </li>`);
      ...
    });