Question

我在通过jQuery生成html时遇到了一个问题。

想象一下这种情况：

我们遍历一个对象并在每次迭代中生成一个div，为它附加一个onclick处理程序，执行该对象中定义的函数：

var obj={
    func1: function(){
        console.log('1');
    },
    func2: function(){
        console.log('2');
    }
};
for(var r in obj){
    if(obj.hasOwnProperty(r)){
        $('<div/>', {
            class: 'testClass',
            onclick: obj[r]
        }).appendTo('#main');
    }
}

问题是该函数在应用于onclick时正在执行。我尝试将其包装在代理函数中，但随后它是执行的代理函数，从而产生相同的结果。

如何将对象中定义的函数应用于onclick处理程序，而不执行它们？

See the according jsFiddle here

（您会注意到在加载时（定义对象然后运行迭代时，函数将被执行，因此您将在控制台日志中看到'1'和'2'）

Answer 1

使用jQuery绑定事件处理程序而不是使用onclick属性：

for(var r in obj){ if(obj.hasOwnProperty(r)){ $('<div/>', { class: 'testClass' }).on('click', obj[r]).appendTo('#main'); } }

Updated jsFiddle

Answer 2

这种情况正在发生，因为你正在使用onclick而不是使用click jQuery倾向于执行onclick属性而不是将其应用为点击处理程序尝试这个小提琴现在应该工作< / p>

var obj={ func1: function(){ console.log('1'); }, func2: function(){ console.log('2'); }, }; for(var r in obj){ if(obj.hasOwnProperty(r)){ $('<div/>', { class: 'testClass', click: obj[r] }).appendTo('#main'); } } jsfiddle

在生成html时，防止jQuery执行分配给属性的函数

2 个答案: