Aufruf der jQuery-Methode aus dem onClick-Attribut in HTML

Ich bin relativ neu in der Implementierung von JQuery im gesamten System, und ich genieße die Gelegenheit.Aufruf der jQuery-Methode aus dem onClick-Attribut in HTML

Ich bin auf ein Problem gestoßen, für das ich gerne die richtige Lösung finden würde.

Hier ist ein einfacher Fall Beispiel dafür, was ich tun möchte:

Ich habe eine Schaltfläche auf einer Seite und auf dem Click-Ereignis möchte ich, dass ich definiert habe eine Jquery-Funktion aufzurufen.

Hier ist der Code, den ich verwendet habe meine Methode (Page.js) zu definieren:

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

Und hier ist meine HTML-Seite:

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

(Der obige Code zeigt die Schaltfläche, aber das Klicken tut gar nichts.)

Ich bin mir bewusst, dass ich das click-Ereignis im document ready-Ereignis hinzufügen könnte, jedoch scheint es haltbarer zu sein, Ereignisse stattdessen in das HTML-Element zu schreiben. Ich habe jedoch keinen Weg gefunden, dies zu tun.

Gibt es eine Möglichkeit, eine jquery-Funktion für ein Schaltflächenelement (oder ein beliebiges Eingabeelement) aufzurufen? Oder gibt es einen besseren Weg, dies zu tun?

Dank

EDIT:

Vielen Dank für Ihre Antworten, scheint es, ich nicht JQuery bin mit richtig. Ich würde wirklich gerne ein Beispiel für ein System mit JQuery auf diese Weise sehen und wie Ereignisse behandelt werden. Wenn Sie Beispiele dafür kennen, lassen Sie es mich bitte wissen.

Mein zugrunde liegendes Ziel für die Verwendung von JQuery ist es, die Menge an Javascript zu vereinfachen und zu reduzieren, die für eine groß angelegte Webanwendung benötigt wird.

Quelle

2010-04-20 Russell

Ich glaube nicht, dass es einen Grund gibt, diese Funktion zu JQuery Namespace hinzuzufügen. Warum definieren nicht nur die Methode selbst:

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

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

UPDATE: Mit einer kleinen Änderung, wie Ihre Methode definiert ist Ich kann es die Arbeit auf:

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

Quelle

2010-04-20 03:40:06 Dexter

Dies ist ein Beispiel-Funktion ist, um das Problem zu demonstrieren. – Russell

OK .. Ich habe ein Beispiel mit der von Ihnen bevorzugten Methode erstellt - sowohl im Bereich als auch im Bereich ohne Bereich. – Dexter

Danke @Dexter, das hat gut funktioniert :) Hinweis Version 1.4.2 funktioniert, während 1.3.2 nicht funktioniert. – Russell

Sie vergessen haben, diese hinzufügen in Ihrer Funktion: Änderung dies:

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

Quelle

2010-04-20 03:45:07 Puaka

Dies funktioniert immer noch nicht. :( – Russell

Dies funktioniert nicht .. zumindest in meinen Tests – Dexter

das funktioniert ....

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

bearbeiten

Sie eine ausfallsichere jQuery-Code mit dem $ alias verwenden ...es soll wie geschrieben werden:

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

oder

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

beachten Sie, dass es ein 'jQuery' Wort in jedem davon hat ....

Quelle

2010-04-20 04:03:38 Reigel

Hallo @Reigel, danke. Das ist, was ich suche :) – Russell

Ist das eine häufige/beliebte Art, diese Art von globalen Funktionsexposition zu behandeln? – Russell

siehe bitte bearbeiten – Reigel

dies nicht tun!

Vermeiden Sie es, die Ereignisse in die Elemente einzufügen! Wenn nicht, you're missing the point von JQuery (oder einer der größten zumindest).

Der Grund, warum es einfach ist, click() - Handler auf die eine und nicht auf die andere Weise zu definieren, ist der andere Weg einfach nicht wünschenswert. Da Sie gerade JQuery lernen, halten Sie sich an die Konvention. Jetzt ist nicht die Zeit in Ihrer Lernkurve für JQuery zu entscheiden, dass alle anderen es falsch machen und Sie haben einen besseren Weg!

Quelle

2010-04-20 04:17:44

Hallo @Dave, ich sage nicht, dass alle anderen es falsch machen. Ich frage mich, wie Jquery "Javascript vereinfachen kann", wenn statt Ereignisse inline hinzufügen, um Ereignisse zu einer Liste von JavaScript-Funktionsaufrufen in einer separaten JS-Datei hinzuzufügen? Wie würde ein Entwickler wissen, welche Ereignisse von welchen Elementen ausgelöst werden? Ich schätze deine Antwort und würde Jquery gerne benutzen (und nicht gegen sie arbeiten). :) – Russell

Es gibt ein paar Möglichkeiten, dies zu tun. Sie müssen keine separate JS-Datei haben. Wenn Sie möchten, können Sie Ihr Skript einfach in einen

Ich weiß, das schon vor langer Zeit beantwortet wurde, aber wenn Sie nicht auf die Schaltfläche dynamischen Erstellung nichts dagegen, das funktioniert nur den Rahmen 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>

Quelle

2017-04-26 22:48:19

Verwandte Themen