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" 为起点，找到拼接的元素，然后定义事件。