jQuery 附加 onclick 功能不起作用

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()是全局定義的（例如，不在文檔內部准備好）。

下面是一個例子：

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

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

Answer 2

正如評論中提到的，您不能像當前那樣在字符串中嵌套類似的引號。 你需要用反斜杠來逃避它們：

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

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

Answer 3

使用 `quote 而不是 '

我在這里創建了一個 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>");

Answer 4

您最好完全去掉內聯 JS 並使用 jQuery 添加事件偵聽器（使用事件委托，因為您要向 DOM 添加新元素）。

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

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

Answer 5

你可以試試這個：

$(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!
});