HTML сгенерированный JavaScript с помощью onClick не вызывает функцию

Question

Приведенный ниже скрипт добавляет элементы в массив при нажатии на ссылку и генерирует список элементов в виде вывода html.Вы можете увидеть пример здесь: http://jsfiddle.net/dqFpr/

Я пытаюсь создать функцию для удаления элементов из списка.Не сложная задача с splice (), но как-то нажатие на ссылку удаления не вызывает функцию test_function().

Может кто-нибудь сказать мне, что я делаю неправильно, или показать мне другой способ запуска функции?Ваша помощь очень ценится; -)

<script language="javascript">
    $(document).ready(function() {
        function test_function( number ) {
            /* This function is not triggered, nothing works inside here!! */
        }
    });

    var lines = [];
    function update_list( lines ) {
        var thecode = '';
        for(var i = 0; i < lines.length; i++) {
            thecode = thecode + lines[i] + ' <a onclick="javascript:test_function('+i+')" href="#">(delete)</a><br />';
        }
        $('div#display').html(thecode);
    }

    $('a#new').click(function() {
        lines.push('another line');
        update_list(lines); 
    });
</script>

<div id="display"></div>
<a href="#" id="new">Add a new line</a>

Answer 1

Поскольку в тексте, присвоенном display innerHTML, * test_function * - это просто обычный текст, который оценивается анализатором HTML. В этот момент сфера его применения является глобальной, а не в пределах IIFE, переданного $(document).ready(). Вы можете исправить это, сделав функцию глобальной:

$(document).ready(function(){

    window.test_function = function (number) { 
      // do stuff
    }
    ....
});

или

var test_function;
$(document).ready(function(){

    test_function = function (number) { 
      // do stuff
    }
    ....
});

Или любым другим способом получить доступ к функции. Но хотя он объявлен внутри области действия анонимной функции, доступ к нему можно получить только из функции, которая имеет замыкание для переменных в этой области.