Question

我正在尝试使用jQuery向对象添加一个函数。不幸的是，这不能按预期工作。 This jsfiddle shows a minimal example of my problem. 我刚开始使用jQuery并阅读文档，但我需要提示我应该朝哪个方向解决问题。

谢谢。

<ul id="ul_list">
    <li id="li_a">a</li>
</ul>
$("#li_a").speak = function () {
    alert("Hello I'm a!");
};

var button = $('<button/>').html('speak');
button.click(function () {
    $('#li_a').speak();
});
button.appendTo("body");

Answer 1

您正在错误地添加成员函数。为此，您需要extend jQuery's prototype object。您需要附加到$.fn.speak：

$.fn.speak = function () {
    alert("Hello I'm a!");
};

var button = $('<button/>').html('speak');
button.click(function () {
    $('#li_a').speak();
});

Answer 2

试试这个jsfiddle：

http://jsfiddle.net/w22aj7rs/

＆＃13;

(function ($) {

    $.fn.speak = function () {
        alert("Hello I'm speaking!");
        return this;
    };

}(jQuery));

var button = $('<button/>').html('speak');
button.click(function () {
    
    $('li').each(function () {
        $(this).speak();
    });
});
button.appendTo("body");

＆＃13;

Answer 3

你正在做的事情是行不通的，因为jQuery的$函数每次调用它时都会返回一个包含元素的新数组对象。改变其中一个只会更改其实例，下次当你致电$来获取元素时，它就是一个全新的数组。

你可以做的是使用jQuery的data函数将函数存储在对象中：

$("li_a").data("speak", function() {
    alert("Hello I'm a!");
});

并用

调用它

button.click(function () {
    $("li").each(function () {
        $(this).data("speak")();
    });
});

注意如何在循环中调用该函数 - 我们首先访问＆＃39; speak＆＃39;然后打电话给它。

当您希望每个元素有不同的行为时，此方法很有效。如果他们都表现得相似，那么你可能最好像其他答案描述的那样扩展$.fn，因为这样做可以为所有对象分配行为。

Answer 4

感谢您的帮助。

我找到了解决问题的方法可能不是最好的，但对我有用。

<ul id="ul_list">
    <li id="li_a">a</li>
</ul>   
$('#li_a') [0].speak = function () {
  alert('Hello I\'m a!');
};
var button = $('<button/>').html('speak2');
button.click(function () {
  var el = $('#li_a') [0];
  if (typeof el.speak == 'function') el.speak(); 
});
button.appendTo('body');

使用[0]我猜到了DOM元素。

将函数添加到jQuery元素

4 个答案: