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();
For jQuery 1.7 and later, use .on() and .trigger()
$('button').on('someFunction',function() {
alert('go away!')
});
$('button').click(function(){
$(this).trigger('someFunction');
});
Before jQuery 1.7 we used .bind() method for attaching event handlers (instead of .on()).
someFunction. It is someEvent. You bind an event handler for your custom event and triggers an event. To trigger an event and to invoke a plugin function are two different things.yo can do the above with this:
$.fn.testFn = function(){
this.each(function(){
var className = $(this).attr('class');
$(this).html(className);
});
};
$('li').testFn(); //or any element you want
@Reigel's answer is great! However you could also use the $.fn syntax and let your function only handle certain elements:
$.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();
See working jsfiddle: http://jsfiddle.net/AKnKj/3/
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");
snippet.data('destructor', function(){
//do something
});
snippet.data('destructor')();
snippet is not global which is the case in most UI codesIf 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.
$('.my-selector').each(function(){
$(this).init.prototype.getUrl = function(){
// do things
};
})
then later on you can do
$('.my-selector').getUrl()
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
$('.my-selector').each(function(){
$(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');
$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();
$('#menu')[0].open = function(){ ... }; So that you can get a handle and assign an arbitrary function to it all in one step.
open() is not a function when I call it later in code. The problem is, that you bind your function to the jQuery object, not to the DOM. What means, when you access this DOM element later via another selector will no longer have a connection to the assigned function.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:
obj.prop("myFunc")("Cool!");
Note: your function is the return value of the outer one, see: http://api.jquery.com/prop/#prop-propertyName-function
I'm not also sure with my answer if this will help you but just a try how about using .live?
$(selector).live(click,function(){
//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
$('.someElements')and call the function as that variable plus.someFunction()later.var someElements = $('.someElements'); someElements.myFunc = function() { /* code here */ };