Plugin jQuery:
(function($ ){ $ .fn.extend({ meuPlugin: function(){ $ ('body').on('click', this, function( e ){ console.log( $ (this).attr('href') ); return false; }); } }); })(jQuery);
Seletor no HTML:
<a href="um_link_qualquer.php" id="link_teste">Meu link</a>
Chamada do Plugin:
$ (document).ready(function(){ $ ('#link_teste').meuPlugin(); });
Problema:
$ (this).attr('href')
está fazendo referência ao body
, não ao $ ('#link_teste')
na chamada do plugin.
• Minha primeira tentativa foi alterar:
$ ('body').on('click', this, function( e ){
para this.on('click', function() {
(function($ ){ $ .fn.extend({ meuPlugin: function(){ //$ ('body').on('click', this, function( e ){ this.on('click', function() { console.log( $ (this).attr('href') ); return false; }); } }); })(jQuery);
PS: Funcionou, mas não 100%. Acontece que se eu atribuir o plugin à um elemento que será carregado posteriormente via ajax, o click não vai chamar o plugin.
• Tentei também com o e.target
, a única diferença é que ao invés de retornar o body
, retorna o elemento clicado, seja lá qual for.
Objetivo:
Preciso dos atributos de #link_teste
referenciando-o dentro do plugin, tais como href
, action
, method
, etc e que seja compatível com as chamadas do ajax:
$ ('#link_teste').meuPlugin();
Obrigado desde já!