onchange事件 is not defined

jsp:

<div class="input-group" style="margin-top: 10px;">
      <span class="input-group-addon" style="height: 30px;">
          <i class="fa fa-search"></i>
      </span><input id="search_input_unit" type="text" onchange="searchUnit();"
                class="form-control" placeholder="輸入內容進行檢索"
                style="height: 30px;" />
</div>

js:

function searchUnit (){
    alert(1);
}

或者

searchUnit = function (){
    alert(1);
}

提示報錯：

1 Uncaught ReferenceError: searchUnit is not defined
    at HTMLInputElement.onchange

解決辦法：刪除input里的事件，並按下面寫法

js:

function searchUnit (){
    alert(1);
}
$("#search_input_unit").on("change",searchUnit);

或者

$("#search_input_unit").on("change",function (){
    alert(1);
});

 補：對於js拼接html，如下面這樣：

tbBody += '<tr class="' + trColor + '">' + '</td>'
            + '<td>' + n.name + '</td>' + '<td>'
                   + n.code + '</td>' + '<td>' 
　　　　　　　+ '<button data-code="'+n.code+'" data-name="'+n.name+'" class="btn btn-outline green binding" type="button" >綁定</button>'
            + '</td></tr>';

對於button事件

$("#bill_type_table").on('click','tr>td .binding',function(){
        
}）

直接$(".binding").on('click',function(){}) 不起作用。

解決辦法1、將上面的事件寫法寫到js最外層，不要在框架里面。

解決辦法2、以html或jsp已有的元素如：id="bill_type_table" 為起點，找到拼接的元素，然后定義事件。