JavaScriptがonclickで生成されたHTMLは関数をトリガーしません

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

を高く評価しているため、表示のinnerHTMLプロパティに割り当てられたテキストでは、* test_function *は、HTMLパーサによって評価されるだけのプレーンテキストです。その時点で、その範囲はグローバルであり、$(document).ready()に渡されたIIFEの範囲内ではありません。あなたは、グローバル関数を作ることによってこれを修正することができます

$(document).ready(function(){ 

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

または

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

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

または任意のメソッドは、機能へのアクセスを取得したいです。しかし、無名関数のスコープ内で宣言されている間は、そのスコープ内の変数へのクロージャを持つ関数からしかアクセスできません。