web-dev-qa-db-fra.com

Ajouter la fonction jQuery à des éléments spécifiques

Je sais que vous pouvez ajouter de nouvelles fonctions jQuery par $.fn.someFunction = function()

Cependant, je souhaite ajouter des fonctions à des éléments spécifiques uniquement. J'ai essayé cette syntaxe et ça ne marche pas $('.someElements').fn.someFunction = function()

Je veux le faire pour pouvoir appeler la fonction comme ceci quelque part dans le code $('someElements').someFunction();

jqueryfunctionadd
47
user2385136

Utilisez .bind() et .trigger()

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


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

Depuis jQuery 1.7, la méthode . On () est la méthode préférée pour attacher des gestionnaires d'événements à un document.

48
Reigel

vous pouvez faire ce qui précède avec ceci:

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

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

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

19
DarkThrone

Yo, qui devait faire la même chose, est venu avec ça. son Nice parce que vous détruisez l'élément et la fonction va pouf! Je pense...

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

@ La réponse de Reigel est excellente! Cependant, vous pouvez également utiliser le $.fn syntaxe et laissez votre fonction gérer uniquement certains éléments:

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

Voir jsfiddle de travail: http://jsfiddle.net/AKnKj/3/

8
Friederike

Si vous ne souhaitez utiliser cette fonction que pour des sélecteurs particuliers, ce qui suit fonctionnera pour vous. Je viens d'avoir un scénario où j'en avais besoin et cela fonctionne bien.

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

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

plus tard, vous pouvez faire

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

sans avoir à le définir comme un plugin, ou à utiliser des données ou des événements bind/on/trigger.

Évidemment, vous pouvez changer la fonction pour renvoyer l'objet conteneur si vous voulez l'utiliser dans le chaînage en retournant this

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

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

J'ai également eu ce cas d'utilisation, mais avec un objet mis en cache. J'avais donc déjà un objet jQuery, un menu à bascule, et je voulais attacher deux fonctions à cet objet, "ouvrir" et "fermer". Les fonctions devaient conserver la portée de l'élément lui-même et c'était tout, donc je voulais que this soit l'objet de menu. Quoi qu'il en soit, vous pouvez simplement ajouter des fonctions et des variables à volonté, comme n'importe quel autre objet javascript. Parfois j'oublie ça.

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();
7
charltoons

La solution la plus évidente consiste à affecter une fonction comme propriété de l'objet:

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

Appelez-le ensuite sur l'objet de cette façon:

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

Remarque: votre fonction est la valeur de retour de celle externe, voir: http://api.jquery.com/prop/#prop-propertyName-function

2
Snegh

Je ne suis pas également sûr de ma réponse si cela vous aidera, mais essayez simplement d'utiliser .live?

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