JQuery Append добавив дополнительные qoute

Question

Мой код:

$("#thescreenshots").append("<img class='screenshotthumbnails' 
    onclick='openScreenshotModal('"+dataReturned['screenshots'][i]+"')' 
    src='/assets/screenshots/"+ dataReturned['screenshots'][i] +"'>"); 

выводит:

<img class="screenshotthumbnails" onclick="openScreenshotModal(" 'img_0203.png')'="" 
    src="/assets/screenshots/IMG_0203.PNG"> 

Почему это добавить дополнительный странный qoute? И как я могу это исправить?

Answer 1

Используйте двойные кавычки внутри тебя нажмите события после побега

onclick='openScreenshotModal(\"" + dataReturned['screenshots'][i] + "\")' 

Это гарантирует, что свойство не заканчивается внезапно, как дальняя свойство начинается с одиночной кавычки.

Answer 2

Вам нужно избегать некоторых ваших цитат. Попробуйте это:

$("#thescreenshots").append('<img class="screenshotthumbnails" onclick="openScreenshotModal(\''+dataReturned['screenshots'][i]+'\')" src="/assets/screenshots/'+ dataReturned['screenshots'][i] +'">'); 

Это будет что-то вроде этого:

<img class="screenshotthumbnails" onclick="openScreenshotModal('img_0203.png')" src="/assets/screenshots/IMG_0203.PNG">

Answer 3

Было бы лучше, чтобы отделить JavaScript из HTML - форма & функции и все, что ...

Попробуйте что-то вроде этого:

$('body').on('click', '.screenshotthumbnails', function(){ 
    var largeImage = $(this).attr('data-larger-image'); 
    openScreenshotModal(largeImage); 
}); 

var image = '<img class="screenshotthumbnails" data-larger-image="img_0203.png" src="/assets/screenshots/IMG_0203.PNG">'; 

$("#thescreenshots").append(image);