JavaScript: modifica del valore di onclick con o senza jQuery

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

Domanda

Vorrei cambiare il valore dell'attributo onclick su un'ancora. Voglio impostarlo su una nuova stringa che contiene JavaScript. (Quella stringa viene fornita al codice JavaScript sul lato client dal server e può contenere tutto ciò che è possibile inserire nell'attributo attr("onclick", js) in HTML.) Ecco alcune cose che ho provato:

  • L'uso di jQuery setAttribute("onclick", js) non funziona con Firefox e IE6 / 7.
  • L'uso di onclick = function() { return eval(js); } funziona con Firefox e IE8, ma non con IE6 / 7.
  • L'uso di return non funziona perché non ti è consentito utilizzare eval() è il codice passato a <=>.

Qualcuno ha un suggerimento su come impostare l'attributo onclick per farlo funzionare per Firefox e IE 6/7/8? Vedi anche sotto il codice che ho usato per testarlo. 

<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>
È stato utile?

Soluzione

Non dovresti più usare onClick se stai usando jQuery. jQuery fornisce i propri metodi di collegamento e associazione di eventi. Vedi .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);
});

Questo dovrebbe annullare la funzione onclick="" - e mantenere il tuo " javascript da una stringa " anche.

La cosa migliore da fare sarebbe rimuovere <a> dall'elemento onclick = function() { return eval(js); } nel codice HTML e passare a metodo discreto per associare un evento a cui fare clic.

Hai anche detto:

  

L'uso di onclick = eval("(function(){"+js+"})"); non funziona perché non ti è permesso usare return in codice passato a eval ().

No - non lo farà, ma onclick = new Function(js); avvolgerà la variabile 'js' in un contenitore di funzioni. Function() funziona anche ed è un po 'più pulito da leggere. (nota la F maiuscola) - vedi documentazione su <=> costruttori

Altri suggerimenti

A proposito, senza JQuery questo potrebbe anche essere fatto, ma ovviamente è piuttosto brutto in quanto considera solo 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

Ad ogni modo, solo così le persone hanno un'idea generale di cosa si può fare, dato che sono sicuro che molti si sono imbattuti in questo fastidio.

Un gotcha con Jquery è che la funzione click non riconosce il click codificato a mano dall'html.

Quindi, devi praticamente scegliere. Imposta tutti i tuoi gestori nella funzione init o tutti in HTML.

L'evento click in JQuery è la funzione click $ (" myelt "). click (funzione ....).

usa solo il metodo jQuery bind! jquery-selector! .bind ('event',! fn!);

Vedi qui per ulteriori informazioni sugli eventi in jQuery

Se non vuoi veramente navigare in una nuova pagina puoi anche avere l'ancora da qualche parte sulla pagina in questo modo. 

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

E quindi per assegnare la tua stringa di JavaScript al clic dell'ancora, mettilo da qualche altra parte (cioè l'intestazione, più avanti nel corpo, qualunque cosa): 

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

Se hai tutte queste informazioni sul server prima di inviare la pagina, puoi anche semplicemente posizionare il JavaScript direttamente nell'attributo href dell'ancora in questo modo: 

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

Nota che seguendo l'idea di gnarf puoi anche fare: 

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

Ciò imposterà il clic senza attivare l'evento (ha avuto lo stesso problema qui e mi ci è voluto del tempo per scoprirlo).

È venuto su con una soluzione rapida e sporca a questo. Ho appena usato <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

Spero che questo aiuti

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top