javascriptを使用してボタンから値を取得しようとしています

Question

テーブルに複数の削除ボタンがあり、各ボタンには固有のIDがあります。私はJavaScriptを介してこの値を取得しようとしていますが、私はそれを全く動かすことができません。

function createRow(movie) { 
     movie.NewDate = new Date(movie.ReleaseDate); 
     return '<tr><td><img class="movieImage" src="' + 
      movie.ImageLink + 
      '" alt="' + 
      movie.Title + 
      ' Image" style="width:50px;height:75px">' + 
      '<td>' + 
      movie.Title + 
      '</td><td>' + 
      movie.NewDate.toLocaleDateString("en-US") + 
      '</td><td><button type="button" class="removeButton" value="' + movie.DVDID + '">Delete</button></td></tr>'; 
    } 

そして、ここで私はIDを取得しようとしていますJSです：

ここ

は、jsのセクションが正常に動作し、正しいHTMLを（これは、各映画のために走っている）にロードされています

$(document) 
.ready(function() { 
    var deleteButtons = $(".removeButton"); 
    deleteButtons.each(function (index) { 
     var currentButton = $(this); 
     var buttonValue = currentButton.val(); 
     currentButton.click(function() { 
      alert(buttonValue); 
     }); 
    }); 
}); 

は、私はちょうど適切なアラートが十分であろう取得今

Click one of multiple buttons, put value in text inputを経由して最後のスニペットを見つけました。

Answer 1

$（ "＃tableId"）。（ "クリック"、 ".removeButton"、function（）{alert（$（this）.attr（ "value"））;} ）

この "on"は、クリックがトリガーされたときに、すべての ".removeButton"要素を所定の関数でバインドします。

Answer 2

使いのブラウザではJavaScriptが次のようになります。

$(document).ready(function() { 
    var deleteButtons = $(".removeButton"); 
    deleteButtons.on('click', function() { 
     alert($(this).attr('value')); 
    }); 
}); 

をまた、あなたはJavaScriptでdynamiclyこれらのボタンを追加するので、あなたは新しい行を追加した後、ボタンのクリックイベントを再バインドする必要があるかもしれません。また、バインディングはボタンhtmlをDOMにロードした後に行う必要があります。

Answer 3

ボタンを動的に作成しているので、javascriptが起動されたときにDOMに存在しなかったので、正しくボタンに到達できません。ただ、

$(document).on('click', '.removeButton', function(){ 
    console.log($(this).val()) 
}) 

See fiddle for complete example