JavaScript: Ändern Sie den Wert von Onclick mit oder ohne jQuery

StackOverflow https://stackoverflow.com/questions/826628

Frage

Ich möchte den Wert des onclick Attribut auf einen Anker ändern. Ich will es auf eine neue Zeichenfolge setzen, die JavaScript enthält. (Dieser String an den clientseitige JavaScript-Code vom Server zur Verfügung gestellt, und es kann, enthält alles, was Sie im onclick Attribute in HTML setzen können.) Hier sind ein paar Dinge, die ich versuchte:

  • Mit jQuery attr("onclick", js) nicht mit Firefox und IE6 / 7.
    • funktioniert
  • setAttribute("onclick", js) Verwendung arbeitet mit Firefox und IE8, aber nicht IE6 / 7.
  • onclick = function() { return eval(js); } Mit funktioniert nicht, weil es nicht erlaubt ist return verwenden Code eval() übergeben.

Jeder hat einen Vorschlag auf das Onclick-Attribut auf 6/7/8 diese Arbeit für Firefox und IE zu machen? Siehe auch unter dem Code, den ich verwenden, um dies zu testen. 

<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>
War es hilfreich?

Lösung

Sie sollten nicht onClick mit mehr, wenn Sie jQuery verwenden. jQuery bietet seine eigenen Methoden für die Befestigung und Bindungsereignisse. 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 abbrechen - und halten Sie Ihre „javascript aus einem String“ und

.

Das Beste, was zu tun wäre, die onclick="" vom <a> Element im HTML-Code zu entfernen, und schalten Sie die Dokumentation auf Function() Konstrukteuren sehen

Andere Tipps

BTW, ohne JQuery dies auch getan werden könnte, aber es ist offensichtlich ziemlich hässlich, da es nur IE / Nicht-IE hält: 

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

Wie auch immer, nur so, dass die Menschen haben eine allgemeine Vorstellung davon, was getan werden kann, wie ich sicher, dass viele bin haben sich zu diesem Ärger gestolpert.

Ein Gotcha mit JQuery ist, dass die Klick-Funktion, die Hand nicht tun bestätigen Onclick aus der HTML-codiert.

Also, Sie haben ziemlich viel zu wählen. Richten Sie alle Ihre Handler in der init-Funktion oder alle von ihnen in html.

Das Click-Ereignis in JQuery ist die Klick-Funktion $ ( "myelt"). Klicken (Funktion ....).

nur jQuery bind-Methode verwenden jQuery-Selektor .bind ( 'Ereignis', fn!)!

Sehen Sie hier, um mehr über Ereignisse in jQuery

Wenn Sie nicht wollen, tatsächlich zu einer neuen Seite navigieren Sie Ihren Anker irgendwo auf der Seite wie diese haben können. 

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

Und dann die Zeichenfolge von JavaScript auf die das OnClick des Ankers zuweisen, setzen Sie diesen woanders (das heißt den Header, später im Körper, 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 all diese Informationen auf dem Server, bevor Sie die Seite zu senden, dann könnten Sie auch einfach legen Sie die JavaScript direkt im href Attribute des Ankers in etwa so: 

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

Beachten Sie, dass gnarf Idee folgend können Sie auch tun: 

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

Das wird die Onclick gesetzt, ohne das Ereignis ausgelöst wird (hatte das gleiche Problem hier, und es dauerte einige Zeit, um herauszufinden).

kam mit einem quick and dirty fix dazu angestiftet. Nur gebrauchter <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

Hope, das hilft

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top