從附加元素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()方法從索引為0的jQuery對象訪問基礎DOM元素（因此，在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演示

請注意，除了增加了.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);
}