Add jQuery function to specific elements

I know that you can add new jQuery functions by $.fn.someFunction = function()

However, I want to add functions to specific elements only. I tried this syntax and it doesn't work $('.someElements').fn.someFunction = function()

I want to do this so that I can call the function like this somewhere in the code $('someElements').someFunction();


Use .bind() and .trigger()

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


As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

yo can do the above with this:

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

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


Yo, needed to do the same thing, came up with this. its nice cause you destroy the element and function goes poof! I think...

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

@Reigel's answer is great! However you could also use the $.fn syntax and let your function only handle certain elements:

$.fn.someFunction = 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

See working jsfiddle:

If you're wanting this function only for particular selectors, the following will work for you. I've just had a scenario where I've needed this and it works nicely.


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

then later on you can do


without having to define it as a plugin, or use data or bind/on/trigger events.

Obviously you can change the function to return the containing object if you want to use it in chaining by returning this


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

I actually had this use case as well, but with a cached object. So I already had a jQuery object, a toggle-able menu, and I wanted to attach two functions to that object, "open" and "close". The functions needed to preserve the scope of the element itself and that was it, so I wanted this to be the menu object. Anyway, you can just add functions and variables all willy nilly, just like any other javascript object. Sometimes I forget that.

var $menu = $('#menu');
$ = 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;


The most obvious solution is to assign a function as the object's property:

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

Then call it on the object this way:


Note: your function is the return value of the outer one, see:

I'm not also sure with my answer if this will help you but just a try how about using .live?

    //some codes here

I did this and its working fine..

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

and call function from your dynamic function which is creating a dynamic control in html

Need Your Help

Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?


Given a directive (container1) with transclude and an isolated scope, when the directive is linked then I have these scopes:

How to share service between two modules - @NgModule in angular not between to components?

angular angular2-services angular2-modules

In my application, I have two different bootstrap module (@NgModule) running independently in one application. There are not one angular app bit separate bootstrap module and now I want they should