48 votes

JavaScript: changer la valeur de onclick avec ou sans jQuery

J'aimerais changer la valeur de l' onclick d'attribut sur une ancre. Je veux le mettre à une nouvelle chaîne qui contient du code JavaScript. (Cette chaîne est prévue pour le code JavaScript côté client par le serveur, et il contient tout ce que vous pouvez mettre dans l' onclick de l'attribut HTML.) Voici quelques choses que j'ai essayé:

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

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

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

74voto

gnarf Points 49213

Vous ne devriez pas utiliser onClick plus si vous êtes en utilisant jQuery. jQuery fournit ses propres méthodes de fixation et de liaison des é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);
});

Qui devrait annuler l' onClick fonction - et de garder votre "javascript à partir d'une chaîne" ainsi.

La meilleure chose à faire serait de supprimer l' onclick="" de la <a> élément dans le code HTML et le commutateur à l'aide de la Discrète méthode de la liaison d'un événement de clic.

Vous avez également dit:

À l'aide de onclick = function() { return eval(js); } ne fonctionne pas parce que vous n'êtes pas autorisé à utiliser le retour dans le code passé à la fonction eval().

Non - il n'est pas, mais onclick = eval("(function(){"+js+"})"); va envelopper le 'js' variable en fonction du boîtier. onclick = new Function(js); fonctionne aussi bien et est un peu plus propre à lire. (notez la majuscule F) - voir la documentation sur Function() constructeurs

3voto

Eduardo Points 2140

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 cette gêne.

0voto

Tom Hubbard Points 5961

Un des pièges à Jquery est que la fonction click ne reconnaît pas la main codée à onclick à partir du code HTML.

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

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

0voto

Trickster Points 2286

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

0voto

ntownsend Points 2424

Si vous n'avez pas vraiment envie de naviguer vers une nouvelle page, vous pouvez aussi avoir votre ancre quelque part sur la page comme ça.

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

Et puis affecter votre chaîne de JavaScript pour le onclick de l'ancre, le mettre quelque part d'autre (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 l'envoi de la page, alors vous pouvez aussi tout simplement de placer le code JavaScript directement dans l' href attribut de l'ancrage de la sorte:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X