Chiamare il metodo jQuery dall'attributo onClick in HTML

Sono relativamente nuovo nell'implementare JQuery in un intero sistema e mi sto godendo l'opportunità.Chiamare il metodo jQuery dall'attributo onClick in HTML

Mi sono imbattuto in un problema che mi piacerebbe trovare la soluzione corretta per.

Ecco un semplice esempio caso di quello che voglio fare:

Ho un tasto su una pagina, e l'evento click voglio chiamare una funzione jQuery ho definito.

Ecco il codice che ho usato per definire il mio metodo (Page.js):

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

E qui è la mia pagina 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>

(Il codice di cui sopra mostra il pulsante, ma facendo clic non fa nulla.)

Sono consapevole che potrei aggiungere l'evento click nell'evento pronto per il documento, tuttavia sembra più manutenibile mettere gli eventi nell'elemento HTML. Tuttavia non ho trovato un modo per farlo.

C'è un modo per chiamare una funzione jquery su un elemento pulsante (o qualsiasi elemento di input)? O c'è un modo migliore per farlo?

Grazie

EDIT:

Grazie per le vostre risposte, sembra non sto usando correttamente JQuery. Mi piacerebbe molto vedere un esempio di un sistema che utilizza JQuery in questo modo e come vengono gestiti gli eventi. Se conosci qualche esempio per dimostrarlo, per favore fammelo sapere.

Il mio obiettivo di base per l'utilizzo di JQuery è quello di semplificare e ridurre la quantità di javascript richiesto per un'applicazione Web su larga scala.

fonte

2010-04-20 Russell

Non penso ci sia alcun motivo per aggiungere questa funzione allo spazio dei nomi di JQuery. Perché non solo definire il metodo di per sé:

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

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

UPDATE: Con una piccola modifica al modo in cui il metodo è definito posso farlo funzionare:

<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>

fonte

2010-04-20 03:40:06 Dexter

Si tratta di una funzione di esempio, per dimostrare il problema. – Russell

OK .. Ho aggiornato con un esempio che funziona usando il tuo metodo preferito - sia con scope che senza ambito. – Dexter

Grazie a @Dexter, ha funzionato bene :) Nota la versione 1.4.2 funziona, mentre la 1.3.2 non funzionerà. – Russell

si è dimenticato di aggiungere questo nella funzione: modifica a questo:

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

fonte

2010-04-20 03:45:07 Puaka

Ancora non funziona. :( – Russell

Questo non funziona .. almeno nei miei test – Dexter

questo funziona ....

<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>

modificare

si utilizza un fail-safe codice jQuery utilizzando il $ alias ...dovrebbe essere scritto come:

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

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

nota che ha una parola 'jQuery' in ognuno di esso ....

fonte

2010-04-20 04:03:38 Reigel

Ciao @Reigel, grazie, questo è quello che sto cercando :) – Russell

È questo un modo comune/popolare per gestire questo tipo di esposizione globale delle funzioni? – Russell

vedi edit – Reigel

non farlo!

Stai lontano dal mettere gli eventi in linea con gli elementi! Se non lo fai, you're missing the point di JQuery (o uno dei più grandi almeno).

Il motivo per cui è facile definire i gestori di click() in un modo e non nell'altro è che l'altro modo è semplicemente non desiderabile. Visto che stai imparando JQuery, attenersi alla convenzione. Ora non è il momento della tua curva di apprendimento per JQuery per decidere che tutti gli altri lo stanno facendo male e tu hai un modo migliore!

fonte

2010-04-20 04:17:44

Ciao @Dave, non sto dicendo che tutti gli altri lo stanno facendo male. Mi chiedo come jquery possa "semplificare javascript" se invece di aggiungere eventi in linea per aggiungere eventi a un elenco di chiamate di funzioni javascript in un file js separato? Come fa uno sviluppatore a sapere quali eventi sono stati attivati da quali elementi? Apprezzo la tua risposta e mi piacerebbe davvero usare (e lavorare con, non contro) Jquery. :) – Russell

Ci sono un paio di modi per farlo. Non è necessario disporre di un file JS separato. Se lo desideri, puoi semplicemente inserire il tuo script in un blocco

So che questo è stato risposto molto tempo fa, ma se non ti dispiace la creazione del pulsante in modo dinamico, questo funziona utilizzando solo il framework 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>

fonte

2017-04-26 22:48:19

Problemi correlati