毎回異なるパラメータを持つメソッドを呼び出すボタンを動的に作成します。

Question

jQueryを使用して既存のテーブルに追加する行を作成しています。これらの行のそれぞれに削除ボタンが含まれていて、パスフレーズを要求してからこの行を削除するメソッドを呼び出すようにします。そのために、私はこのような新しい行を作成します。

$('tbody').append('<tr id="row' + index + '"><th>' + name + '</th>' + '<th>' + zutaten + '</th>' + '<th>' + foodtype + '</th>' + '<th><button onclick="showPwdDialog(' + index + ');">Delete</button></th></tr>'); 

あなたが見ることができるように、私は、パラメータとして行のインデックスを持つshowPwdDialogメソッドを呼び出ししようとしています。しかし、これは動作していないようです。何が間違っているのですか？

Answer 1

あなたのようなhtmlフラグメントを介して要素を構築するときに、あなたのonclickハンドラが正しくバインドされているとは思わないです。

これはどうでしょうか？魔法のように

var index = 0; 

function showPwdDialog(i) { 
    if (confirm("Delete this row?")) 
    $("#test #row"+i).remove(); 
} 

function addRow(){ 
    var i = ++index; 
    var row = $("<tr>") 
    .attr("id", "row"+(i)) 
    .append($("<th/>").html("name")) 
    .append($("<th/>").html("zutaten")) 
    .append($("<th/>").html("name")) 
    .append($("<th/>") 
     .append($("<button/>") 
     .text("Delete") 
     .on("click", function(){ 
      showPwdDialog(i); 
     }) 
    ) 
    ); 

    /* add row to table here */ 
} 

jsfiddle