将 jQuery 函数添加到特定元素

Question

我知道你可以通过$.fn.someFunction = function()添加新的jQuery函数

但是，我只想向特定元素添加功能。我试过这个语法，它不起作用$('.someElements').fn.someFunction = function()

我想这样做，以便我可以在代码$('someElements').someFunction(); 的某处调用这样的函数

Answer 1

使用.bind() 和.trigger()

$('button').bind('someFunction',function() {
    alert('go away!')
});


$('button').click(function(){
    $(this).trigger('someFunction');
});

从 jQuery 1.7 开始，.on() 方法是 将事件处理程序附加到文档。

Answer 2

最明显的解决方案是分配一个函数作为对象的属性：

obj.prop("myFunc", function() {
  return (function(arg) {
    alert("It works! " + arg);
  });
});

然后以这种方式在对象上调用它：

obj.prop("myFunc")("Cool!");

注意：你的函数是外层的返回值， 见：http://api.jquery.com/prop/#prop-propertyName-function

Answer 3

如果您只想为特定的选择器使用此功能，以下内容将适用于您。我刚刚遇到了一个我需要它的场景，并且效果很好。

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
    };
})

以后你可以做

$('.my-selector').getUrl()

无需将其定义为插件，或使用数据或绑定/开启/触发事件。

如果你想通过返回this在链接中使用它，显然你可以改变函数以返回包含对象

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
        return this;
    };
})

Answer 4

我做了这个并且它工作正常..

 function do_write(){
     $("#script").append("<script> $(\'#t"+(id_app+4)+"\').change(function(){  alert('Write Your Code here');    });<\/script>");
     console.log("<script> $(\'#t"+(id_app+4)+"\').change(function(){  alert('hello');    });<\/script>");
}

并从您的动态函数中调用函数，该函数在 html 中创建动态控件

Answer 5

我实际上也有这个用例，但是有一个缓存对象。所以我已经有了一个 jQuery 对象，一个可切换的菜单，我想将两个函数附加到该对象，“打开”和“关闭”。保留元素本身范围所需的功能就是这样，所以我希望this 成为菜单对象。无论如何，您可以随意添加函数和变量，就像任何其他 javascript 对象一样。有时我会忘记这一点。

var $menu = $('#menu');
$menu.open = function(){
   this.css('left', 0);
   this.is_open = true; // you can also set arbitrary values on the object
};
$menu.close = function(){
   this.css('left', '-100%');
   this.is_open = false;
};

$menu.close();

Answer 6

哟，需要做同样的事情，想出了这个。这很好，因为您破坏了元素并且功能变得很糟糕！我觉得……

var snippet=jQuery(".myElement");
snippet.data('destructor', function(){
    //do something
});
snippet.data('destructor')();

Answer 7

@Reigel 的回答很棒！但是，您也可以使用 $.fn 语法并让您的函数只处理某些元素：

$.fn.someFunction = function(){
    this.each(function(){
        // only handle "someElement"
        if (false == $(this).hasClass("someElement")) {
            return; // do nothing
        }

        $(this).append(" some element has been modified");

        return $(this); // support chaining
    });    
};

// now you can call your function like this
$('.someElement').someFunction();            

查看工作中的 jsfiddle：http://jsfiddle.net/AKnKj/3/

Answer 8

我也不确定我的回答是否会对您有所帮助，但只是尝试一下使用 .live 怎么样？

$(selector).live(click,function(){
    //some codes here
});

Answer 9

你可以这样做：

$.fn.testFn = function(){
    this.each(function(){
        var className = $(this).attr('class');
        $(this).html(className);
    });    
};

$('li').testFn(); //or any element you want

测试：http://jsfiddle.net/DarkThrone/nUzJN/