javascript - 如何将对象引用传递给 Javascript/jQuery 中的函数？

Question

我正在制作的数据工具中有两个函数 - showEditDv(object) 和 editDv(object)。如果您还没有猜到，Dv 代表数据值。当您单击编辑数据图标时，将调用 showEditDv。它生成一个 Opentip工具提示(将)允许您编辑数据，并在 onclick 属性中像这样调用:showEditDv(this);。这是该函数的代码(不，实际中没有内联注释):

function showEditDv(object) {
    var name = $(object).attr("data-name"); // string(name) now holds the name of the data value
    var input = new Opentip($(object), {target: null, showOn: null, hideTrigger: "closeButton"});
    input.setContent("<label>Name:</label><input type='text' value='" + name + "' class='dv-add-name' /><label>Value:</label>input type='text' class='dv-add-value' value='" + data[name] + "' /><button onclick='editDv(" + $(object) /*<-- problem */ + ");'>Apply</button>");
    input.show();
}

当“Apply”按钮调用 editDv() 函数时，就会出现问题。因为该对象是在字符串中引用的(我认为!)，所以该对象引用被打印为 [object Object]，并且该函数无法隐藏 Opentip，因为它没有对它。以下是 editDv() 的代码:

function editDv(object) {
    var input = $(object).data("opentips")[0]; // data("opentips") is an array of objects
    input.hide();
}

所以我的问题是:如何将 input 对象从 showEditDv 传递到 editDv 作为参数，或者有更好的方法完全做到这一点？

Answer 1

不要通过 onclick 事件调用内联函数，而是使用 jQuery 的 .on() 函数:

像这样:

function showEditDv(object) {
    var name = $(object).data("name"); // use .data()
    var input = new Opentip($(object), {target: null, showOn: null, hideTrigger: "closeButton"});
    input.setContent("<label>Name:</label><input type='text' value='" + name + "' class='dv-add-name' /><label>Value:</label>input type='text' class='dv-add-value' value='" + data[name] + "' /><button class='callEditDv'>Apply</button>");
    input.show();
}

并且

$('.callEditDv').on('click', function() {
    // access the button like this: $(this)
});