Добавление вложенных котировок

Question

Я играю с функциями добавления jquery. Я добавляю довольно много html, это в основном кнопка html, содержащая функцию события onclick.

Звучит непонятно? Я знаю. У меня есть некоторые технические ограничения, которые оставляют меня с этим единственным вариантом на день или два.

Во всяком случае, вот несколько примеров:

Это не работает:

$('body').append('<button onclick="(function(){console.log(' + '"Hello World"' + ');}())">BTN1</button>'); 

Это работает и сообщения в INT:

$('body').append('<button onclick="(function(){console.log(' + "3" + ');}())">BTN2</button>'); 

Проблема заключается в декларации из строка в кавычки onclick. Я думаю, что это должно сработать, но поскольку я не делаю что-то неправильно. Вопрос в том, что.

Answer 1

Вы не можете использовать двойные кавычки в значении атрибута onclick, так как двойная кавычка используется для разграничения атрибута (onclick="..."). Вместо того, чтобы использовать обратную косую черту, чтобы избежать апостроф так:

$('body').append('<button onclick="(function(){console.log(\'Hello World\');}())">BTN1</button>'); 

или в качестве альтернативы, если вы хотите, чтобы сцепить строки:

$('body').append('<button onclick="(function(){console.log(' + '\'Hello World\'' + ');}())">BTN1</button>'); 

Answer 2

Вы можете использовать одинарные кавычки для атрибутов, так что вы можете сохранить двойные кавычки. Просто убедитесь, что вы убегаете инлайн одиночные кавычки в части JS ж/обратная косая черта

$('body').append('<button onclick=\'(function(){console.log(' + '"Hello World"' + ');}())\'>BTN1</button>'); 

Answer 3

Вложение нескольких языков несколько слоев глубокий кошмар, чтобы писать и поддерживать. Попытайтесь избежать этого вообще. Создайте объект DOM для кнопки, а затем привяжите обработчик события JS к нему отдельно.

$('body').append(
    $("<button>BTN1</button>").on(
     'click', 
     function() { 
      console.log("Hello World"); 
     } 
    ) 
);