绑定一个 onclick 函数,对象作为在循环中创建的锚标记上的参数

Bbind a onclick function with object as parameter on anchor tag created in a loop

本文关键字:创建 循环 参数 一个 onclick 对象 函数 绑定      更新时间:2023-09-26

我正在获取一些 JSON 数据,我正在循环浏览它,对于每个数据,我正在创建一个 Anchor 标签,onClick它,我正在尝试调用一个以对象为参数的函数。

像这样:

$.getJSON('/ui_dashboard/rest/getAlertDefVsAlertValues',function(data) {    
        console.log(data)
        $("#checkAllAlertsTbody").empty();
        var mailServerTbody="";
        var objData = data.getAlertDefVsAlertValues;
        var objLen = objData.length;
        
        for(var i=0;i<objLen;i++){      
            //one object for all the key in the json 
            var alertWholeObject = {
                    alertFunctionId : objData[i].alertFunctionId,
                    alertMessage : objData[i].alertMessage,
                    definitionName:objData[i].definitionName,
                    emailMessage : objData[i].emailMessage,
                    emailSubject:objData[i].emailSubject,
                    emailTemplate : objData[i].emailTemplate,
                    hubId:objData[i].hubId,
                    id : objData[i].id,
                    isDefinitionEnabled:objData[i].isDefinitionEnabled,
                    mandatoryParam : objData[i].mandatoryParam,
                    scanInterval:objData[i].scanInterval,
                    smsMessage : objData[i].smsMessage,
                    smsTemplateId:objData[i].smsTemplateId,
                    tenantId : objData[i].tenantId,
                    timestamp:objData[i].timestamp,
                    list: objData[i].list,
                    isArray : function(what){
                        return Object.prototype.toString.call(what) === '[object Array]';
                    }
            };
        console.log(alertWholeObject.alertMessage)
            var idWithoutSpace = alertWholeObject.id.replace(/ /g, '');
            //for overview table
                mailServerTbody = '<tr><td>'+(i+1)+'</td><td>'+alertWholeObject.definitionName+'</td><td>'+alertWholeObject.timestamp+'</td><td>'+
                '<div class="controls center">'+
                '<a class="btn btn-info btn-mini"  id="edit_'+idWithoutSpace+'" onclick="editAlertRules(' + alertWholeObject + ');"><i class="icon-edit icon-white">&nbsp;&nbsp;&nbsp;&nbsp;</i></a>'+
                '<a class="btn btn-danger btn-mini" id="delete_'+idWithoutSpace+'" ><i class="icon-trash icon-white">&nbsp;&nbsp;&nbsp;&nbsp;</i></a>'+
                '</div></td></tr>'; 
            $("#checkAllAlertsTbody").append(mailServerTbody);
        }
        
    });
}

但是onclick功能不起作用; 在控制台中,它只显示[object object]

如何将在循环中创建的这个对象发送到每个锚标记的单击?

请帮忙。

已编辑

对不起,我跳枪了。以下是更新:

不要将对象作为参数传递。而是传递索引。声明具有外部作用域(或全局作用域)的 Object 数组。

var obj = [];

for 循环中,在当前索引处实例化此数组中的一个对象:

for (i=0; ....) {
    obj[i] = new Object;
...
}

现在,当您指定内联onclick时,只需传递索引:

mailServerTbody = "... <a ... onclick='editAlertRules(" + i + ");'" ...</a>.."

在函数内部editAlertRules使用外部作用域中的对象作为参数:

function editAlertRules(index) {
console.log(obj[index]);
...
}

检查这个小提琴以获得想法:http://jsfiddle.net/n8hSJ/1/

希望有帮助。

使用 jQuery 绑定到点击事件。函数作用域将使正确的 alertWholeObject 可用于点击回调。在将 HTML 追加到文档后添加此代码。

$('#edit_' + idWithoutSpace).click(function () {
    editAlertRules(alertWholeObject);
});