闭包引起的onclick不起作用

问题描述:在html页面绑定οnclick="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" οnclick="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" οnclick="unchangedBtn('+data.data[i].id+')">不变</div>' +
'<div class="ezsm-collection-table-btn" οnclick="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-*自定义属性)

转载于:https://www.cnblogs.com/zhaozhenzhen/p/8795736.html