Añadir función de jQuery para elementos específicos

Question

Sé que puede añadir nuevas funciones jQuery por $.fn.someFunction = function()

Sin embargo, quiero añadir funciones a elementos específicos solamente. Probé esta sintaxis y no funciona $('.someElements').fn.someFunction = function()

quiero hacer esto para que pueda llamar a la función como esta en alguna parte del código de $('someElements').someFunction();

Answer 1

Uso .bind() y .trigger()

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


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

Como de jQuery 1.7, el método .on() es el preferido método para asociando controladores de eventos al anuncio ocument

Answer 2

tuve una idea que pensé que podría funcionar hacer cerca a lo que quiere, pero no funcionó, y mi conclusión es que esto no es posible.

Mi idea era hacer lo que había intentado, pero en un objeto jQuery en caché, por ejemplo:

var a = $("a"); 
a.fn.someFunc = function() {...}; 
a.someFunc();

Pero desde $(...).fn no existe, eso no es posible.

Answer 3

yo puedo hacer lo anterior con esto:

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

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

prueba: http://jsfiddle.net/DarkThrone/nUzJN/

Answer 4

No estoy seguro con mi respuesta si esto lo ayudará pero solo intente ¿qué tal usar .live?

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

Answer 5

Yo, necesitaba hacer lo mismo, se le ocurrió esto. es una buena causa para destruir el elemento y la función va poof! Creo que ...

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

Answer 6

@ Reigel's answer is great! Sin embargo también se puede utilizar la sintaxis $.fn y deje que su función sólo manejar ciertos elementos:

$.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();    

Ver jsFiddle de trabajo: http://jsfiddle.net/AKnKj/3/

Answer 7

realidad tenía este caso de uso, así, pero con un objeto en caché. Así que ya tenía un objeto jQuery, un menú que se puede alternar, y quería adjuntar dos funciones a ese objeto, "abrir" y "cerrar". Las funciones necesarias para preservar el alcance del elemento en sí y eso era todo, así que quería que this fuera el objeto del menú. De todos modos, solo puede agregar funciones y variables de todos modos, como cualquier otro objeto javascript. A veces me olvido de eso.

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 8

Hice esto y funciona bien ..

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

y la función de llamada de su función dinámica que está creando un control dinámico en HTML

Answer 9

Si estás queriendo esta función sólo para los selectores en particular, lo siguiente será trabajar para usted. Acabo de tener un escenario donde lo he necesitado y funciona muy bien.

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

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

continuación, más adelante se puede hacer

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

sin tener que definirlo como un plugin, o el uso de datos o se unen en/eventos/gatillo.

Obviamente se puede cambiar la función para devolver el objeto que contiene si desea utilizarlo en el encadenamiento mediante la devolución this

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

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

Answer 10

La solución más obvia es asignar una función como la propiedad del objeto:

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

Entonces lo llaman en el objeto de esta manera:

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

Nota: su función es el valor de retorno de la externa, ver: http://api.jquery.com/prop/#prop-propertyName-function