从附加元素 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）会在该部分代码完成执行后持续存在，但当该变量超出范围时，创建的 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"> 元素的语法。

Answer 2

好的，其中大部分都不是语法正确的 javascript，而且似乎过于复杂。我相信，如果我了解您想要达到的目标，您会想要以下内容：

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