Javascript：使用动态参数从 onclick 事件调用对象函数/方法答案

【问题标题】：Javascript: calling object function/method from onclick event, with dynamic argumentJavascript：使用动态参数从 onclick 事件调用对象函数/方法
【发布时间】：2013-01-31 22:16:24
【问题描述】：

我正在尝试这样做：

<script>
var MyItem;

MyItem = new myobj('testobj');

function myobj(id)
{
     var _id = id;

     this.toggle = function()
     {
       ...
     }

     function draw()
     {
         document.body.innerHTML += "<a onclick='" + MyItem + ".toggle();'>link</a>";
     }

     draw();

}
</script>

我得到“函数未定义”，但可以从控制台成功调用 MyItem.toggle()。我也试过：

document.body.innerHTML += "<a onclick='(function(){" + MyItem + ".toggle();})()'>link</a>";

锚点必须在 javascript 中动态创建。如何从动态创建的锚点调用 MyItem 对象方法 toggle()？

ps，我是凭记忆输入js，如有语法错误，敬请见谅。

【问题讨论】：

你正在输出一个字符串；这是没有意义的。您需要在该字符串中输出变量的名称......如果这确实是您想要这样做的方式。
你是对的。应该是 ... _id + '.toggle()' ... ID 始终 = obj 实例名称。

标签： javascript object dynamic onclick invoke

【解决方案1】：

不要添加类似的事件处理程序和元素。使用 DOM 方法

var anchor = document.createElement("a");
anchor.innerHTML = "link";
anchor.onclick = function(){ MyItem.toggle(); };
document.body.appendChild(anchor);

我实际上认为你在追求这样的东西

var MyItem;

MyItem = new myobj('testobj');

function myobj(id) {
    var that = this;
    this.toggle = function () {
        alert(id);
    }
    function draw() {
        var anchor = document.createElement("a");
        anchor.innerHTML = "link";
        anchor.onclick = function () {
            that.toggle();
        };
        document.body.appendChild(anchor);
    }
    draw();
}

【讨论】：

您对该方法的绝对权利，但 MyItem 对象只能作为存储在 _id 属性中的字符串使用。您将如何将其添加到 onclick 事件中？
为什么必须指定that=this？

【解决方案2】：

那是行不通的。您正在尝试使用像字符串这样的对象。请尝试以下操作：

document.body.innerHTML += "<a onclick='(function(){MyItem.toggle();})()'>link</a>";

【讨论】：