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

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

2 个答案: