JavaScript: changer la valeur de onclick avec ou sans jQuery

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

Question

J'aimerais modifier 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. Elle peut contenir tout ce que vous pouvez mettre dans l'attribut attr("onclick", js) en HTML.) Voici quelques opérations que j'ai essayées:

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

Quelqu'un a-t-il déjà 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>
Était-ce utile?

La solution

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 votre " javascript d'une chaîne " aussi bien.

La meilleure chose à faire serait de supprimer l'élément <a> de l'élément onclick = function() { return eval(js); } du code HTML et de passer à l'aide de l'élément Unobtrusive méthode pour lier un événement à cliquer.

Vous avez également dit:

  

L'utilisation de onclick = eval("(function(){"+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 = new Function(js); enveloppera la variable 'js' dans une enceinte de fonction. Function() fonctionne aussi bien et est un peu plus propre à lire. (notez la lettre majuscule F) - voir la documentation sur les <=> constructeurs .

Autres conseils

BTW, sans JQuery, cela pourrait également être fait, mais évidemment, il est plutôt 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.

Un des pièges à Jquery est que la fonction de clic n’accuse pas la main codée à partir du code HTML.

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

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

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

Pour plus d'informations sur les événements jQuery , cliquez ici.

Si vous ne souhaitez pas accéder à une nouvelle page, vous pouvez également placer votre ancre quelque part sur cette page. 

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

Ensuite, pour attribuer votre chaîne de code JavaScript au clic de l'ancre, placez-la 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>

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 configurera onclick sans déclencher l'événement (le même problème se présentait ici et il m'a fallu un certain temps pour le savoir).

Je suis arrivé 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 vous aidera

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top