jQuery append 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

Использование `цитата вместо '

Я создал jsbin здесь. II надеюсь, что это то, что вы пытаетесь сделать

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 2

Вы должны бежать апостроф внутри:

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

И убедитесь, что test() определен глобально (а не внутри документ готов к пример).

Вот пример:

window.test = function(value){ 
 
\t 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 3

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

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 4

Вы лучше принимать, что встроенный JS вне вообще и с помощью JQuery, чтобы добавить слушатель событий (с помощью event delegation, потому что вы добавляете новые элементы в DOM).

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

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