Question

我有追加功能的问题。此代码无法正常运行。

$(element).append("<a onclick='test('test')'> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i></a>");

测试功能：

function test(value)
{
 alert(value);
}

我怀疑这个问题与onclick功能有关。

Answer 1

你必须在内部逃避撇号：

 $(element).append("<a onclick='test(\"test\")'> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i></a>");

确保全局定义test()（例如，不在文档内部）。

以下是一个例子：

＆＃13;

window.test = function(value){
	alert(value);
};
$('div').append("<a onclick='test(\"test\")'>click me</a>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

Answer 2

正如评论中所提到的，您不能像目前那样在字符串中嵌套类似的引号。你需要用反斜杠来逃避它们：

＆＃13;

function test(value) {
 alert(value);
}

var element = $('body');

$(element).append("<a onclick='test(\"test\")'> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i>Click Me</a>");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

你最好完全取出内联JS并使用jQuery添加事件监听器（使用event delegation，因为你要向DOM添加新元素）。

$(element).append('<a class="test">...');

$(document).on('click', '.test', function () {
  test('test');
});

Answer 4

您可以尝试以下方法：

$(element).append("<a onclick='test('test')' class="your_class"> <i class='fa fa-spin fa-pencil' aria-hidden='true'></i></a>");

$(document).on('click',".your_class", function(){
//Write here your code!
});

Answer 5

使用`quote而不是＆＃39;

我在这里创建了一个jsbin。我希望这是你要做的事情

http://jsbin.com/wicanok/edit?html,js,output

$('#element').append("<a onclick='test(`test`)'> <i class='fa fa-spin fa-pencil' aria-hidden='true'>Hi</i></a>");

jQuery附加onclick函数不起作用

5 个答案: