2010-03-25 30 views
50

Estoy tratando de llamar a una función definida por el usuario en jQuery:Llamar a una función definida por el usuario en jQuery

$(document).ready(function() { 
 
    $('#btnSun').click(function() { 
 
    myFunction(); 
 
    }); 
 
    $.fn.myFunction = function() { 
 
    alert('hi'); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

He intentado lo siguiente, así:

$(document).ready(function() { 
 
    $('#btnSun').click(function() { 
 
    myFunction(); 
 
    }); 
 
}); 
 

 
function myFunction() { 
 
    alert('hi'); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

¡Parece que no funciona! Alguna idea de donde estoy equivocado?

+1

Definiría esto como un ** complemento ** –

+1

solo un comentario, ya que está usando $ .fn.myFunction, en la mayoría de los casos está diciendo que desea usar esta función durante un objeto jquery envuelto válido, ej. '$ ('your_html_tag'). myFunction()'. http://jsfiddle.net/H7z8f/ –

Respuesta

61

Si desea llamar a una función normal a través de un evento jQuery, puede hacerlo de esta manera:

$(document).ready(function() { 
 
    $('#btnSun').click(myFunction); 
 
}); 
 

 
function myFunction() { 
 
    alert('hi'); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

+1

Si necesita una función personalizada para un objeto (por ejemplo, una variable), puede utilizar 'Object.prototype.SayIt = función (es) {return this + s;}; var ramone = 'Hola, ho'; var s = 'Vamos'; console.log (ramone.SayIt (s)); '. Si tiene problemas, use 'Object.defineProperty (Object.prototype," SayIt ", {value: function (s) {sus cosas aquí}});' –

+4

@Nick Craver puede agregar parámetros a la función de definición del usuario si es así cómo lo usarías {function myFunction (val1, val2) { // cómo lo usarías aquí }} y cómo llamarías a la función ... gracias – Amjad

+0

Esto no funcionó para mí. El de Ruslan López Carro funcionó (está abajo). – alikuli

6

probar este $('div').myFunction();

Esto debería funcionar

$(document).ready(function() { 
$('#btnSun').click(function(){ 
    myFunction(); 
}); 

function myFunction() 
{ 
alert('hi'); 
} 
+0

¿Significa que no podemos crear una función definida por el usuario en Jquery y llamarnos como lo hacemos normalmente? – user269867

+0

Oye, esto funciona para mí $ ('div'). MyFunction(); :-). Genial !! ¿Puede ayudarme a entender este comportamiento? ¿Por qué necesitamos $ ('div'). myFunction() ... ¿por qué no puedo llamar a myFunction como función normal? – user269867

+0

Lo está asignando al objeto jQuery. –

11

Se llaman plugins, como se comentó Jaboc. Para que tenga sentido, la función de complemento debería hacer algo con el elemento al que se llama. Considere lo siguiente:

jQuery.fn.make_me_red = function() { 
    return this.each(function() { 
     this.style.color = 'red'; 
    }); 
}; 

$('a').make_me_red(); 
3
jQuery.fn.make_me_red = function() { 
    return this.each(function() { 
     this.style.color = 'red'; 
    }); 
}; 

$('a').make_me_red() // - instead of this you can use $(this).make_me_red() instead for better readability. 
28

Intenta esto . Siempre funciona

$(document).ready(function() { 
 
    $('#btnSun').click(function() { 
 
    $.fn.myFunction(); 
 
    }); 
 
    $.fn.myFunction = function() { 
 
    alert('hi'); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

+0

Estaba tratando de perder el tiempo en algo estúpido. Probé todos los códigos que se mencionan aquí, pero no pude siquiera 'alertar (0);' it. Estaba tratando de encontrar una solución y aquí estaba, presioné 'F12' y parece que mi ** AdBlocker ** estaba bloqueando algunos contenidos que se muestran. Leer más: [** No se pudo cargar el recurso en Chrome google.maps api **] (http://stackoverflow.com/a/34625042/5737774) – fWd82

8

El siguiente es el método correcto

$(document).ready(function() { 
    $('#btnSun').click(function(){ 
     $(this).myFunction(); 
    }); 
    $.fn.myFunction = function() { 
     alert('hi'); 
    } 
}); 
0
jQuery.fn.make_me_red = function() { 
    alert($(this).attr('id')); 
    $(this).siblings("#hello").toggle(); 
} 
$("#user_button").click(function(){ 
    //$(this).siblings(".hello").make_me_red(); 
    $(this).make_me_red(); 
    $(this).addClass("active"); 
}); 
​ 

declaración de la función de devolución de llamada y en jQuery.

0
$(document).ready(function() { 
    $('#btnSun').click(function(){ 

     myFunction(); 

    }); 

    $.fn.myFunction = function() { 
    alert('hi'); 

    }; 
}); 

Put '; 'después de la definición de función ...

Cuestiones relacionadas