d3 - foreign object - getting the right scope - object

Question

I am using foreignObject to use HTML inside a d3 circle.
What I want:
use HTML inside d3 objects
reach the normal scopes outside of HTML code
Now I have problems to get the right scope for using functions.
If I use "this" inside the
.html(".....")
I get the "g" element of d3. So is there a way to get to my normal scopes? Or is there even a more elegant way to solve this problem?
var foreign = that._foreignObject = d3.select(this).append("foreignObject")
.attr("width", 30)
.attr("height", 30)
.append("xhtml:div")
.style("font", "15px 'Arial'")
.html("<button name=Klickmich type=button value=play onclick=>");
EDIT: 16.12.2013:
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
//click once
.on("click", function (d) {
if (that._foreignObject) {
that._foreignObject.remove();
}
that.toggle(d);
that.update(d);
that.onNodeClick(d);
var circle = d3.select(this).select("circle")
.transition()
.duration(750)
.attr("r", 17)
.attr("width", 40)
.attr("heigth", 40)
.style("stroke-dasharray", ("5,2"))
.style("stroke-width", 2)
.style("stroke", "black");
var button = "<button name=Klickmich type=button value=play onclick=>";
var foreign = that._foreignObject = d3.select(this).append("foreignObject")
.attr("width", 30)
.attr("height", 30)
.append("xhtml:div")
.style("font", "15px 'Arial'")
.html(button)
.on("click", function (d) {
console.log("heyho");
});
d3.select(this).select("text").transition()
.duration(750)
.style("font-size", 15)
.style("font-weight", "bold")
.attr("x", function (d) {
return d.children || d._children ? -20 : -20;
});
})

Answer 1

If i Click on my html button i set
this._clicked = 1;
And the onClick function of the node is build as follows:
.on("click", function (d) {
if (this._clicked == null) {
// some code
}
}
this._clicked = null;