web-dev-qa-db-fra.com

JavaScript: changer la valeur de onclick avec ou sans jQuery

J'aimerais changer la valeur de l'attribut onclick sur une ancre. Je souhaite définir une nouvelle chaîne contenant du code JavaScript. (Cette chaîne est fournie au code JavaScript côté client par le serveur et peut contenir tout ce que vous pouvez mettre dans l'attribut HTML onclick.) Voici quelques exemples de ce que j'ai essayé:

  • 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 avec IE6/7.
  • L'utilisation de onclick = function() { return eval(js); } ne fonctionne pas car vous n'êtes pas autorisé à utiliser return, c'est du code transmis à eval().

Quelqu'un a-t-il été suggéré de définir l'attribut onclick pour que cela fonctionne avec Firefox et IE 6/7/8? Voir également 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>
javascriptjqueryonclickattributes
48
avernet

Vous ne devriez plus utiliser onClick si vous utilisez jQuery. jQuery fournit ses propres méthodes d'attachement et de liaison d'événements. Voir .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 conserver également votre "javascript from a string".

La meilleure chose à faire est de supprimer le onclick="" de l'élément <a> dans le code HTML et de passer à la méthode Unobtrusive permettant de lier un événement à cliquer.

Vous avez également dit:

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

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

74
gnarf

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

En tout cas, 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 cette gêne.

3
Eduardo

Jquery a obtenu l’avantage de ne pas reconnaître la main codée à la main à partir du code HTML.

Donc, vous devez choisir. Configurez tous vos gestionnaires dans la fonction init ou tous en html. 

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

0
Tom Hubbard

Notez que suivant l’idée de gnarf, vous pouvez aussi faire:

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

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

0
Eduardo

utilisez simplement la méthode de liaison jQuery! jquery-selector! .bind ('event',! fn!);

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

0
Ilya Khaprov

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

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

Et ensuite, pour assigner votre chaîne de code JavaScript au bouton-clic de l'ancre, placez-le 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 code JavaScript directement dans l'attribut href de l'ancre, comme suit:

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