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

Question

I have two functions in a data tool that I'm making - showEditDv(object) and editDv(object) . If you haven't already guessed, Dv stands for Data Value. showEditDv is called when you click on the edit data icon. It generates an Opentip tooltip that (will) allow you to edit data, and is called like this: showEditDv(this); in an onclick attribute. Here is the code for that function (no, there aren't inline comments in the actual thing):

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();
}

The problem arises when the editDv() function is called by the 'Apply' button. Because the object is being referred to in a string (I think!), the object reference is printed as [object Object] , and the function cannot hide the Opentip because it doesn't have a reference for it. Here is the code for editDv() :

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

So my question is: how can I pass the input object from showEditDv to editDv as an argument, or is there a better way to do this entirely?

Answer 1

Don't call the function inline with an onclick event, use jQuerys .on() function instead:

Like so:

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();
}

AND

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