it-swarm.com.de

JavaScript: Ändern des Wertes von onclick mit oder ohne jQuery

Ich möchte den Wert des onclick-Attributs eines Ankers ändern. Ich möchte es auf eine neue Zeichenfolge setzen, die JavaScript enthält. (Diese Zeichenfolge wird vom Client für den clientseitigen JavaScript-Code bereitgestellt und kann alles enthalten, was Sie in das onclick-Attribut in HTML einfügen können.) Hier ein paar Dinge, die ich versucht habe:

  • Die Verwendung von jQuery attr("onclick", js) funktioniert nicht mit Firefox und IE6/7.
  • Die Verwendung von setAttribute("onclick", js) funktioniert mit Firefox und IE8, nicht jedoch mit IE6/7.
  • Die Verwendung von onclick = function() { return eval(js); } funktioniert nicht, da Sie return nicht verwenden dürfen, da der Code an eval() übergeben wird.

Hat jemand einen Vorschlag, das Attribut onclick so einzustellen, dass dies für Firefox und IE 6/7/8 funktioniert? Siehe auch den Code, den ich zum Testen verwendet habe.

<html>
    <head>
        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var js = "alert('B'); return false;";
                // Set with JQuery: doesn't work
                $("a").attr("onclick", js);
                // Set with setAttribute(): at least works with Firefox
                //document.getElementById("anchor").setAttribute("onclick", js);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com/" id="anchor" onclick="alert('A'); return false;">Click</a>
    </body>
</html>
48
avernet

Sie sollten onClick nicht mehr verwenden, wenn Sie jQuery verwenden. jQuery bietet eigene Methoden zum Anhängen und Binden von Ereignissen. Siehe .click()

$(document).ready(function(){
    var js = "alert('B:' + this.id); return false;";
    // create a function from the "js" string
    var newclick = new Function(js);

    // clears onclick then sets click using jQuery
    $("#anchor").attr('onclick', '').click(newclick);
});

Das sollte die onClick-Funktion aufheben - und auch Ihr "Javascript aus einem String" behalten.

Am besten wäre es, den onclick="" aus dem <a>-Element im HTML-Code zu entfernen und zur Verwendung der Unobtrusive - Methode zu wechseln, um ein Ereignis zu binden.

Sie sagten auch:

Die Verwendung von onclick = function() { return eval(js); } funktioniert nicht, da Sie return in Code nicht verwenden dürfen, der an eval () übergeben wird.

Nein, wird es nicht, aber onclick = eval("(function(){"+js+"})"); wird die 'js'-Variable in eine Funktion Enclosure einschließen. onclick = new Function(js); funktioniert auch und ist etwas sauberer zu lesen. (Beachten Sie das Großbuchstabe F) - siehe Dokumentation zu Function()-Konstruktoren

74
gnarf

Übrigens, ohne JQuery wäre dies auch möglich, aber offensichtlich ist es ziemlich hässlich, da es nur IE/Nicht-IE berücksichtigt:

if(isie)
   tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
   $(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index

Jedenfalls, nur damit die Leute eine allgemeine Vorstellung davon haben, was getan werden kann, da ich sicher bin, dass viele über diesen Ärger gestolpert sind.

3
Eduardo

Ein Problem mit Jquery ist, dass die Click-Funktion den handcodierten Onclick aus der HTML-Datei nicht bestätigt.

Sie müssen sich also ziemlich entscheiden. Richten Sie alle Ihre Handler in der init-Funktion oder alle in html ein. 

Das Klickereignis in JQuery ist die Klickfunktion $ ("myelt"). Click (Funktion ....).

0
Tom Hubbard

Beachten Sie, dass Sie nach der Idee von gnarf auch folgendes tun können:

var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;

Dadurch wird der Onclick gesetzt, ohne das Ereignis auszulösen (hatte hier das gleiche Problem und ich habe einige Zeit gebraucht, um es herauszufinden).

0
Eduardo

verwenden Sie einfach die Methode jQuery bind! jquery-selector! .bind ('event',! fn!);

Weitere Informationen zu Ereignissen in jQuery finden Sie hier

0
Ilya Khaprov

Wenn Sie nicht wirklich zu einer neuen Seite navigieren möchten, können Sie Ihren Anker auch irgendwo auf dieser Seite haben.

<a id="the_anchor" href="">

Um Ihre JavaScript-Zeichenfolge dann dem Ein-Klick des Ankers zuzuweisen, geben Sie diesen an einer anderen Stelle ein (d. H. Die Kopfzeile, später im Text oder was auch immer):

<script>
    var js = "alert('I am your string of JavaScript');"; // js is your string of script
    document.getElementById('the_anchor').href = 'javascript:' + js;
</script>

Wenn Sie alle diese Informationen auf dem Server haben, bevor Sie die Seite versenden, können Sie das JavaScript auch einfach wie folgt in das href-Attribut des Ankers setzen:

<a href="javascript:alert('I am your script.'); alert('So am I.');">Click me</a>
0
ntownsend