javascript - 添加嵌套引号

Question

我正在玩 jquery 的附加功能。我附加了相当多的 html，它基本上是一个包含onclick 事件函数的 html 按钮。

听起来很混乱？我知道。我有一些技术限制，这让我只能选择一两天。

无论如何，这里有一些例子：

这不起作用：

$('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

多层嵌套多种语言是编写和维护的噩梦。尽量避免它。为按钮创建一个 DOM 对象，然后将 JS 事件处理程序单独绑定到它。

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

Answer 3

您可以对属性使用单引号，以便保留双引号。只需确保您使用反斜杠转义 JS 部分中的内联单引号

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