добавление данных атрибутов с помощью JQuery

Question

У меня есть две кнопки генерируется с помощью следующих двух строк JQuery:

prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>', 
nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>', 

Мне нужно добавить следующий атрибут данных для обоих тегов, перечисленных выше.

data-ga-event='{"category":"Creamy-Delicious-Mashed-Potatoes", "action":"Ingredients", "label":"Get-Nutrition-Info"}' 

Я попытался просто вставив его после data-role="none" но он вызывает сообщение об ошибке 404, когда я нажал на кнопку. Я думаю, что это связано с кавычками. Спасибо заранее за вашу помощь.

Answer 1

Вы могли бы сделать, установив данные в качестве объекта, а затем с помощью JSON.stringify конкатенировать с, как было бы избежать всех цитаты:

var data = { 
    "category": "Creamy-Delicious-Mashed-Potatoes", 
    "action": "Ingredients", 
    "label": "Get-Nutrition-Info" 
} 

prevArrow: '<button data-ga-event="' + JSON.stringify(data) +'" >Previous</button>',