DOM对象在通过jquery函数后丢失引用

Question

对象引用给我带来了奇怪的东西。

我在onclick

中有以下带有传递的DOM

 var tdButtonDOMCopy = $('#tD'+catSeq+'Button');

这是in-Jquery创建的按钮，参考了它的下一个功能：

 tdButtonDOM.replaceWith('<button id="buttonChange" onclick="approveFormEdit(\''+tdButtonDOMCopy+'\')"\n\
                          class="btn btn-primary">Sla wijziging op</button>');

我想将整个DOM元素[Object object]作为参数传递给它的下一个函数：

function approveFormEdit(tdButtonElement) {
   alert(tdButtonElement.html());
   .... - Omitted -

现在这是有趣的事情：

在onclick部分中，对象tdButtonDOMCopy被视为DOM对象，我可以在其上使用.html()方法。

但是，一旦对象到达函数approveFormEdit，.html()方法就不再有效，因为它以某种方式丢失了引用DOM对象。

这里发生了什么？

这是上下文的小提琴

jsfiddle.net/1vdwv5r8

Answer 1

您正在引号中传递它的字符串文字所以错误是预期的，因为 .html（）是一个jQuery方法。

您需要删除不带引号的tdButtonDOMCopy传递，然后将其视为变量

tdButtonDOM.replaceWith('<button id="buttonChange" onclick="approveFormEdit(tdButtonDOMCopy)" class="btn btn-primary">Sla wijziging op</button>');

但是，我建议您传递选择器使用data-*自定义属性，该属性可以在事件处理程序中重新执行;

var tdButtonDOMCopy = '#tD' + catSeq + 'Button';
tdButtonDOM.replaceWith('<button id="buttonChange" data-target="' + tdButtonDOMCopy + '" class="btn btn-primary">Sla wijziging op</button>');

function approveFormEdit() {
    var targetSelector = $(this).data('target'); ;
    tdButtonElement = $(targetSelector);
}

$(document).on('click', '#buttonChange', approveFormEdit)