javascript - 从附加元素 jquery 访问对象属性或方法

Question

我想知道是否可以从附加元素访问对象属性。例如:

function anyFct(){
    this.div=$('<div ref="dv">').html('Hi').appendTo('body');
    div.animal='dog';
    div.yld=function(){
        alert(div.animal);
    };
    $('input type="text" value="anyIn" onclick="yeldAnimal(this);"').appendTo(div);
}

function yeldAnimal(obj){
    var actElement=$(obj).closest('div[ref=dv]');
    actElement.yld(); // I want that this yields 'dog'
}

和我的 HTML:

<input type="button" value="test" onclick="anyFct();">

所以这就是逻辑:单击按钮时我创建一个 div 元素。此 div 元素有一个文本，单击该文本会调用一个外部函数，该函数调用其父元素(div)上的方法。

出于许多上下文原因，这一定是逻辑。我已经找到了一个解决方案，即将对象 div 保存在全局数组中，然后在数组的所有值中搜索触发该方法的对象。但是，我想知道是否有“更干净”或正确的方法来执行此操作。

Answer 1

这是可能的，并且有几种方法可以实现它。您需要了解的重要一点是 jQuery 对象和实际 DOM 元素之间的区别。当您使用 jQuery 创建 <div>元素，你创建两者；但最终您得到的引用是 jQuery 对象 - 或者，如果您链​​接 jQuery 函数调用，则为最后调用的函数的结果。假设您实际上将 DOM 元素附加到 DOM，一旦该部分代码完成执行，该 DOM 元素就会持续存在，但当该变量超出范围时，创建的 jQuery 对象将消失。

当您稍后执行一些 jQuery 代码以获取对 DOM 元素的引用时，它引用的是页面上的同一元素，但它是一个不同 jQuery 对象，因此您添加到的任何自定义属性原来的将无法使用。你如何解决这个问题？ 设置实际 DOM 元素的属性。

您可以使用 .get() 方法从 jQuery 对象访问底层 DOM 元素，索引从 0 开始(因此在 jQuery 对象上调用 .get(0) 将返回它引用的第一个 DOM 元素)。这样，您就可以设置自定义属性并稍后检索它们，如下所示:

function anyFct(){
    this.div=$('<div ref="dv">').html('Hi').appendTo('body');
    var elem = div.get(0); // the actual DOM element, the div
    elem.animal='dog';
    elem.yld=function(){
        alert(elem.animal);
    };
    $('<input type="text" value="anyIn" onclick="yeldAnimal(this);"/>').appendTo(div);
}

function yeldAnimal(obj){
    var actElement=$(obj).closest('div[ref=dv]').get(0); // also the div
    actElement.yld(); // alerts 'dog'
}

jsFiddle demo

请注意，除了添加 .get() 的用法之外，我还对您的代码进行了一些更改，最值得注意的是更正了创建 <input type="text"> 的语法。第一个函数中的元素。