javascript - 调用jquery选择的元素的方法

Question

我有一个具有用户定义方法的元素。该元素被创建为更大对象的一部分，并在加载文档时插入。如果我直接从对象中寻址元素，我可以随时调用该方法。

元素是tabs[0].bubbles[0].element 方法是.expand()

(此对象中有多个元素，每个元素都有自己的 .expand() 方法)

所以，这条线

tabs[0].bubbles[0].element.expand();

调用该元素的方法。但是，当发生特定事件时，会调用一个函数，我可以从中选择元素，如下所示:

bubble = $(this).parent(); // the bubble element is the event handlers parent

但是，线条

bubble.expand();
// or 
$(bubble).expand();
// or
$(bubble)[0].expand();

不要调用该方法。

线

tabs[0].bubbles[0].element.expand();

确实调用了方法。但是，我不能使用这一行来调用该方法，因为有许多不同的元素，而且我无法从函数中找到数组元素的索引号。

我认为我可能没有选择正确的元素，但是

($(bubble)[0] === $(tabs[0].bubbles[0].element)[0])

返回 true(很明显，这只会在 bubble 是应该对应于 tabs[0].bubbles[0].element 的元素时发生)。

tabs[0].bubbles[0].element 与 $(bubble)[0] 或 $(bubble)[0 不同]。

如何从使用 JQuery 选择的函数中调用该方法？

编辑

我认为问题在于我如何创建对象。对象的元素字段是在这样的构造方法中创建的。

this.element = $('<div class="bubble ' + this.type + '">\
    <div class="bubbleCentre ' + this.state + ' "> \
        <img class="bubbleIcon" src="img/dash/' + this.icon + '"> \
        <span class="status">' + text + '</span> \
    </div> \
</div>');

.expand() 函数是这样创建的。

this.element.expand = function ()
{
    // method
    alert('method executing');
}

我可以这样调用方法

tabs[0].bubbles[0].element.expand();

但是 bubble.get(0).expand(); 或 bubble.expand(); 什么都不做。

但是，如果我这样定义方法:

this.element.get(0).expand = function ()
{
    // method
    alert('method executing');
}

我现在可以像您期望的那样调用该方法

bubble.get(0).expand(); // expands bubble as you would expect

这在调用方法时就足够了。似乎应该有一种更直接的方法来做到这一点。除了在事件回调函数中选择气泡外，我不明白为什么需要涉及 jQuery。有什么想法吗？

我尝试在定义 .element 时从字符串周围移除 $() (并且在 . expand() 方法已定义)但无论我尝试了何种方式，我都无法调用该方法。

Answer 1

问题在于元素的创建方式。

我现在这样创建元素:

this.element = document.createElement('div');                                                               // first create DOM element

// append child elements
$(this.element).addClass('bubble ' + this.type);
$('<div class="bubbleCentre ' + this.state + ' "></div>').appendTo(this.element)                            // append centre
.append('<img class="bubbleIcon" src="img/dash/' + this.icon + '" title="' + type.capitalize()  + '">')     // append icon to centre
.append('<span class="status">' + text + '</span>')                                                         // append status to centre
.parent().append('<div class="subbubbles"><div style="position: relative;"></div></div>');                  // append subbubbles box

我这样定义方法:

this.element.expand = function ()
{
    // method running
    alert('method running');
}

我这样调用方法:

bubble.get(0).expand(); 

这一切似乎都奏效了。感谢大家的帮助。