闭包引起的onclick不起作用

问题描述:在html页面绑定onclick="cli()" 方法,定义在$(function( function cli(){} ))不起作用

$(function(){

function createTableData(param){
    $.ajax({
        url: "/api/ezs/dataAcquisition/list",
        data:{"param":JSON.stringify(param)},
        type: 'post',
        dataType: 'json',
        success: function (data) {
            // console.log(data);
            $("#collection_content").empty();
            for(var i=0;i<data.data.length;i++){
                var collection_table='<div class="ezsm-collection-table">' +
                    '<table cellspacing="0">' +
                    '<tr><td>名称/规格：</td><td id="openDetail" onclick="openDetail('+data.data[i].id+');">'+data.data[i].specification+'</td></tr>' +
                    '<tr><td>地区：</td><td>'+data.data[i].areaName+'</td></tr>' +
                    '<tr><td>来源：</td><td>'+data.data[i].source+'</td></tr>' +
                    '<tr><td>昨日价格：</td><td>'+data.data[i].price+'</td></tr>' +
                    '<tr>' +
                    '<td>当日价格：</td>' +
                    '<td>' +
                    '<div class="ezsm-collection-table-btn" onclick="unchangedBtn('+data.data[i].id+')">不变</div>' +
                    '<div class="ezsm-collection-table-btn" onclick="Ezsm_Alert_UpPrice('+data.data[i].id+');">更新</div>' +
                    '</td>' +
                    '</tr>' +
                    '</table></div>';
                $("#collection_content").append(collection_table);
            }
        },
        error: function (status) {}
    });
}
//此时定义的opendetail不起作用

function openDetail(trendId){
    localStorage.removeItem('trendId');
    localStorage.setItem('trendId',trendId);
    window.location.href="detail.html";

}
})
 
解决办法
将$(function(){})换成闭包

(function(window){

//打开详情
window.openDetail=function(trendId){
 
    localStorage.removeItem('trendId');
    localStorage.setItem('trendId',trendId);
    window.location.href="detail.html";
};
})(window);
 
原因:$(function(){})只在自己的作用域起作用,onclick绑定的方法只在初始化页面时加载之后就清空其作用域,除非将该方法放在$(function(){})外面,但这样会出现代码冗余.
此时将该方法放在window下面,这样调用的时候就可以了
 
记录: 不建议将onclick绑在页面上,最优的是使用h5 data-*自定义属性(具体使用看js之 data-*自定义属性)