JavaScript(Jquery)で作成したボタンのイベントが発火しない

もしくは、イベントが効かない、反応がない

今回遭遇したバグ

JSで要素を追加した上に、イベントを設定した。
そのイベントが発火しない

詳細
Jqueryの　.html()で　ボタン要素を作成した後、ボタンを制御するScriptを書いたけど、
ボタンは表示されているが、ボタンを押しても反応がない。

var data=[
{"id":1,
"code":"001",
"name":"name1"},
{"id":2,
"code":"002",
"name":"name2"},
{"id":3,
"code":"003",
"name":"name3"},
]

var data1=[
{"id":1,
"code":"001",
"name":"name1 for output1"},
{"id":2,
"code":"002",
"name":"name2 for output1"},
{"id":3,
"code":"003",
"name":"name3 for output1"},
]

var i=1;
var output;
var output1;
$.each(data, function(index, value) {
    output+='<tr>'; 
	output+='<td><input class="code" type="text" value="' + value.code+ '" placeholder="' + value.code+ '" ></td>';
	output+='<td ><input class="name" type="text" value="' + value.name+ '" placeholder="' + value.name+ '" ></td>';
 	output+='<td><button id="update" type="button" value="' + value.id+ '">Update</button></td>';
 	output += '</tr>'
   i++         	
})

$.each(data1, function(index, value) {
    output1+='<tr>'; 
	output1+='<td><input class="code" type="text" value="' + value.code+ '" placeholder="' + value.code+ '" ></td>';
	output1+='<td ><input class="name" type="text" value="' + value.name+ '" placeholder="' + value.name+ '" ></td>';
 	output1+='<td><button id="update" type="button" value="' + value.id+ '">Update</button></td>';
 	output += '</tr>'
   i++         	
})



  $('#tbody').html(output);
  
   $('#flag').click(function() {

        if ($(this).is(':checked')) {
            $('#tbody').html(output1)
        } else {
            $('#tbody').html(output);
        }

    });
    
    $('#update').click(function (){
    		alert("oops!")
    })

demo: https://jsfiddle.net/boababy/tjk0sm4d/10/

ボタンが押せない理由

・画面の読み込みが完了した後、後付けのエレメントのイベントを監察できないから。

　　では、なぜ観察できないの？
　　理由：　エレメントのイベントは、ページ初期化の時に認識する。
　　　　　　その後のイベントは観察できない。

解決方法

JQの「on」メソッドで、最初から存在する親要素を観察する。
その子要素はどう変化しても、イベントをlistenできる。

var data=[
{"id":1,
"code":"001",
"name":"name1"},
{"id":2,
"code":"002",
"name":"name2"},
{"id":3,
"code":"003",
"name":"name3"},
]

var data1=[
{"id":1,
"code":"001",
"name":"name1 for output1"},
{"id":2,
"code":"002",
"name":"name2 for output1"},
{"id":3,
"code":"003",
"name":"name3 for output1"},
]

var i=1;
var output;
var output1;
$.each(data, function(index, value) {
    output+='<tr>'; 
	output+='<td><input type="text" value="' + value.code+ '" placeholder="' + value.code+ '" ></td>';
	output+='<td ><input type="text" value="' + value.name+ '" placeholder="' + value.name+ '" ></td>';
 	output+='<td><button id="update" type="button" value="' + value.id+ '">Update</button></td>';
 	output += '</tr>'
   i++         	
})

$.each(data1, function(index, value) {
    output1+='<tr>'; 
	output1+='<td><input type="text" value="' + value.code+ '" placeholder="' + value.code+ '" ></td>';
	output1+='<td ><input type="text" value="' + value.name+ '" placeholder="' + value.name+ '" ></td>';
 	output1+='<td><button id="update" type="button" value="' + value.id+ '" disabled>Update</button></td>';
 	output += '</tr>'
   i++         	
})



  $('#tbody').html(output);
  
   $('#flag').click(function() {

        if ($(this).is(':checked')) {
            $('#tbody').html(output1)
        } else {
            $('#tbody').html(output);
        }

    });
    
    $("#tbody").on("click","button",function(){
    		alert("It's work!!");
    })

demo： https://jsfiddle.net/boababy/qa19w5df/64/

類似問題

・onload後、後付けのエレメントも取れない。
　　JS例）　var test=document.getElementsByTagName("div")
　　JQ例）　var test=$("div")

なので、上記の類似問題もonメソッドで解決できる。