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>');

添加嵌套引号

3 个答案: