Llamar al método jQuery desde el atributo onClick en HTML

Soy relativamente nuevo en la implementación de JQuery en todo un sistema, y estoy disfrutando la oportunidad.Llamar al método jQuery desde el atributo onClick en HTML

me he encontrado con un problema que me encantaría encontrar la decisión correcta para.

Aquí está un ejemplo simple caso de lo que quiero hacer:

Tengo un botón en una página, y en el evento de clic Quiero llamar a una función jQuery he definido.

Este es el código que he utilizado para definir mi método (Page.js):

(function($) { 
$.fn.MessageBox = function(msg) { 
    alert(msg); 
}; 
});

Y aquí está mi página HTML:

<HTML> 
<head> 
<script type="text/javascript" src="C:\Sandpit\jQueryTest\jquery-1.3.2.js"></script> 
<script language="javascript" src="Page.js"></script> 
</head> 
<body> 
<div class="Title">Welcome!</div> 
<input type="button" value="ahaha" onclick="$().MessageBox('msg');" /> 
</body> 
</HTML>

(El código anterior muestra el botón, pero al hacer clic no hace nada.)

soy consciente de que podría añadir el evento click en el evento ready documento, sin embargo, parece más fácil de mantener a poner los eventos en el elemento HTML en su lugar. Sin embargo, no he encontrado una manera de hacer esto.

¿Hay una manera de llamar a una función jQuery en un elemento de botón (o cualquier elemento de entrada)? ¿O hay una mejor manera de hacer esto?

Gracias

EDIT:

Gracias por sus respuestas, parece que no estoy usando jQuery correctamente. Realmente me encantaría ver un ejemplo de un sistema que usa JQuery de esta manera y cómo se manejan los eventos. Si conoce algún ejemplo para demostrar esto, por favor hágamelo saber.

Mi objetivo subyacente para el uso de jQuery es ayudar a simplificar y reducir la cantidad de Javascript requerida para una aplicación web a gran escala.

Fuente

2010-04-20 Russell

no creo que haya ninguna razón para añadir esta función al espacio de nombres de jQuery. ¿Por qué no acaba de definir el método por sí mismo:

function showMessage(msg) { 
    alert(msg); 
}; 

<input type="button" value="ahaha" onclick="showMessage('msg');" />

ACTUALIZACIÓN: Con un pequeño cambio en cómo se define el método que yo puedo conseguir que funcione:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script language="javascript"> 
    // define the function within the global scope 
    $.fn.MessageBox = function(msg) { 
     alert(msg); 
    }; 

    // or, if you want to encapsulate variables within the plugin 
    (function($) { 
     $.fn.MessageBoxScoped = function(msg) { 
      alert(msg); 
     }; 
    })(jQuery); //<-- make sure you pass jQuery into the $ parameter 
</script> 
</head> 
<body> 
<div class="Title">Welcome!</div> 
<input type="button" value="ahaha" id="test" onClick="$(this).MessageBox('msg');" /> 
</body> 
</html>

Fuente

2010-04-20 03:40:06 Dexter

Esta es una función de ejemplo, para demostrar el problema – Russell

OK ... He actualizado con un ejemplo que funciona utilizando su método preferido, tanto con o sin ámbito. – Dexter

Gracias @Dexter, que funcionó bien :) Tenga en cuenta que la versión 1.4.2 funciona, mientras que 1.3.2 no funcionará. – Russell

se le olvidó añadir este en su función: cambio a esto:

<input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" />

Fuente

2010-04-20 03:45:07 Puaka

Esto todavía no funciona. :( – Russell

Esto no funciona ... al menos en mis pruebas – Dexter

esto funciona ....

<script language="javascript"> 
    (function($) { 
    $.fn.MessageBox = function(msg) { 
     return this.each(function(){ 
     alert(msg); 
     }) 
    }; 
    })(jQuery); 
</script>

<body> 
     <div class="Title">Welcome!</div> 
    <input type="button" value="ahaha" onclick="$(this).MessageBox('msg');" /> 
    </body>

edición

está utilizando un código de jQuery a prueba de fallos con el alias de $ ...debe ser escrito como:

(function($) { 
    // plugin code here, use $ as much as you like 
})(jQuery);

jQuery(function($) { 
    // your code using $ alias here 
});

nota que tiene una palabra 'jQuery' en cada una de ella ....

Fuente

2010-04-20 04:03:38 Reigel

Hola @Reigel, gracias. Esto es lo que estoy buscando :) – Russell

¿Es esta una forma común/popular de manejar este tipo de exposición a funciones globales? – Russell

ver edición – Reigel

No haga esto!

¡Aléjate de poner los eventos en línea con los elementos! Si no lo hace, you're missing the point de JQuery (o uno de los más grandes al menos).

La razón por la que es fácil definir los manejadores de clic() de una forma y no de la otra es que la otra opción simplemente no es deseable. Como acaba de aprender JQuery, adhiérase a la convención. ¡Ahora no es el momento en su curva de aprendizaje para que JQuery decida que todos los demás lo están haciendo mal y que usted tiene una mejor manera!

Fuente

2010-04-20 04:17:44

Hola @Dave, no estoy diciendo que todos los demás lo estén haciendo mal. Me pregunto cómo puede jquery "simplificar javascript" si en lugar de agregar eventos en línea para agregar eventos a una lista de llamadas a función de JavaScript en un archivo js separado? ¿Cómo sabría un desarrollador qué eventos se disparan con cada elemento? Agradezco su respuesta y realmente me gustaría usar (y trabajar con, no contra) Jquery. :) – Russell

Hay un par de formas de hacerlo. No es necesario tener un archivo JS por separado. Si lo desea, puede pegar su script en un bloque

Sé que esto fue respondida hace mucho tiempo, pero si no te importa el botón crear dinámicamente, esto funciona sólo con el marco jQuery:

$(document).ready(function() { 
 
    $button = $('<input id="1" type="button" value="ahaha" />'); 
 
    $('body').append($button); 
 
    $button.click(function() { 
 
    console.log("Id clicked: " + this.id); // or $(this) or $button 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>And here is my HTML page:</p> 
 

 
<div class="Title">Welcome!</div>

Fuente

2017-04-26 22:48:19

Cuestiones relacionadas

Llamar al método jQuery desde el atributo onClick en HTML

Respuesta

Cuestiones relacionadas