JavaScript: modification de la valeur de onclick avec ou sans jQuery

Question

JavaScript: modification de la valeur de onclick avec ou sans jQuery

Je voudrais changer la valeur de l'attribut onclick sur une ancre. Je veux le définir sur une nouvelle chaîne qui contient JavaScript. (Cette chaîne est fournie au code JavaScript côté client par le serveur, et elle peut contenir tout ce que vous pouvez mettre dans l'attribut onclick en HTML.) Voici quelques choses que j'ai essayées:

L'utilisation de jQuery attr("onclick", js) ne fonctionne pas avec Firefox et IE6 / 7.
utiliser setAttribute("onclick", js) fonctionne avec Firefox et IE8, mais pas IE6 / 7.
L'utilisation de onclick = function() { return eval(js); } ne fonctionne pas parce que vous n'êtes pas autorisé à utiliser return est le code passé à eval().

Quelqu'un a une suggestion pour définir l'attribut onclick pour que cela fonctionne pour Firefox et IE 6/7/8? Voir aussi ci-dessous le code que j'ai utilisé pour tester cela.

<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

attributes javascript jquery onclick

demandé sur avernet 2009-05-05 23:51:58

7 réponses

score 74 · Answer 1

Vous ne devriez plus utiliser onClick si vous utilisez jQuery. jQuery fournit ses propres méthodes d'attachement et de liaison des événements. Tu vois .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);
});

Cela devrait annuler la fonction onClick - et garder votre" javascript à partir d'une chaîne " aussi.

La meilleure chose à faire serait de supprimer le onclick="" de l'élément <a> dans le code HTML et de passer à l'utilisation du discret méthode de liaison d'un événement au clic.

Vous aussi a dit:

L'utilisation de onclick = function() { return eval(js); } ne fonctionne pas car vous n'êtes pas autorisé à utiliser return dans le code passé à eval().

Non - ce ne sera pas le cas, mais onclick = eval("(function(){"+js+"})"); enveloppera la variable ' js ' dans un boîtier de fonction. onclick = new Function(js); fonctionne aussi bien et est un peu plus propre à lire. (notez la majuscule F) - voir documentation sur Function() constructeurs

score 3 · Answer 2

BTW, sans JQuery cela pourrait aussi être fait, mais évidemment c'est assez moche car il ne considère que IE / non-IE:

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

Quoi qu'il en soit, juste pour que les gens aient une idée globale de ce qui peut être fait, car je suis sûr que beaucoup sont tombés sur cet ennui.

score 0 · Answer 3

Un gotcha avec Jquery est que la fonction de clic ne reconnaît pas l'onclick codé à la main à partir du html.

Donc, vous devez à peu près choisir. Configurez tous vos gestionnaires dans la fonction init ou tous en html.

L'événement click dans JQuery est la fonction click $("myelt").cliquez sur (fonction ....).

score 0 · Answer 4

Il suffit d'utiliser la méthode jQuery bind !jquery-sélecteur de!.bind ('événement',!fn!);

Voir ici pour plus d'informations sur les événements dans jQuery

score 0 · Answer 5

Si vous ne voulez pas réellement naviguer vers une nouvelle page, vous pouvez également avoir votre ancre quelque part sur la page comme ceci.

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

Et puis pour assigner votre chaîne de JavaScript à l'onclick de l'ancre, mettez ceci ailleurs (c'est-à-dire l'en-tête, plus tard dans le corps, peu importe):

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

Si vous avez toutes ces informations sur le serveur avant d'envoyer la page, vous pouvez également simplement placer le JavaScript directement dans l'attribut href de l'ancre comme ceci:

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

score 0 · Answer 6

Notez que suivant l'idée de gnarf, vous pouvez également faire:

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

Cela va définir l'onclick sans déclencher l'événement (a eu le même problème ici et il m'a fallu du temps pour le savoir).

score -3 · Answer 7

Est venu avec une solution rapide et sale à cela. Juste utilisé <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

J'espère que cela aide

Las etiquetas más populares

JavaScript: modification de la valeur de onclick avec ou sans jQuery

7 réponses