can't catch event

by boababy

HTML

<div>
   <input type="checkbox" id="flag">
   <label for="flag">show delete data</label>
 </div>

 <div>
   <table id="table">
     <thead>
       <tr>
         <th >code</th>
         <th >name</th>
         <th >update</th>
       </tr>
     </thead>
     <tbody id="tbody">

     </tbody>
   </table>
 </div>

JavaScript

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!")
    })