JavaScript: cambiar el valor de onclick con o sin jQuery

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

Pregunta

Me gustaría cambiar el valor del atributo onclick en un ancla. Quiero establecerlo en una nueva cadena que contenga JavaScript. (El servidor proporciona esa cadena al código JavaScript del lado del cliente, y puede contener todo lo que pueda poner en el atributo attr("onclick", js) en HTML). Aquí hay algunas cosas que probé:

  • Usar jQuery setAttribute("onclick", js) no funciona tanto con Firefox como con IE6 / 7.
  • Usar onclick = function() { return eval(js); } funciona con Firefox e IE8, pero no con IE6 / 7.
  • El uso de return no funciona porque no está permitido usar eval() el código se pasa a <=>.

¿Alguien tiene una sugerencia para configurar el atributo onclick para que funcione para Firefox e IE 6/7/8? También vea a continuación el código que usé para probar esto. 

<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>
¿Fue útil?

Solución

No deberías usar onClick más si estás usando jQuery. jQuery proporciona sus propios métodos para adjuntar y vincular eventos. Ver .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);
});

Eso debería cancelar la función onclick="" - y mantener su " javascript de una cadena " también.

Lo mejor sería eliminar el elemento <a> del elemento onclick = function() { return eval(js); } en el código HTML y cambiar a método discreto de vincular un evento para hacer clic.

También dijiste:

  

El uso de onclick = eval("(function(){"+js+"})"); no funciona porque no puede utilizar el código de retorno que se pasa a eval ().

No, no lo hará, pero onclick = new Function(js); ajustará la variable 'js' en un gabinete de funciones. Function() también funciona y es un poco más limpio de leer. (tenga en cuenta la F mayúscula): consulte documentación sobre <=> constructores

Otros consejos

Por cierto, sin JQuery esto también podría hacerse, pero obviamente es bastante feo ya que solo considera IE / no 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

De todos modos, solo para que la gente tenga una idea general de lo que se puede hacer, ya que estoy seguro de que muchos se han topado con esta molestia.

Un problema con Jquery es que la función de clic no reconoce el clic manual codificado desde el html.

Entonces, tienes que elegir. Configure todos sus controladores en la función init o todos en html.

El evento click en JQuery es la función click $ (" myelt "). click (function ....).

solo use el método jQuery bind! jquery-selector! .bind ('event',! fn!);

Consulte aquí para obtener más información sobre eventos en jQuery

Si no desea navegar realmente a una nueva página, también puede tener su ancla en algún lugar de la página como este. 

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

Y luego, para asignar su cadena de JavaScript al onclick del ancla, coloque esto en otro lugar (es decir, el encabezado, más adelante en el cuerpo, lo que sea): 

<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 tiene toda esta información en el servidor antes de enviar la página, entonces también podría simplemente colocar el JavaScript directamente en el atributo href del ancla de esta manera: 

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

Tenga en cuenta que siguiendo la idea de gnarf también puede hacer: 

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

Eso activará el onclick sin activar el evento (tuve el mismo problema aquí y me tomó un tiempo descubrirlo).

Se le ocurrió una solución rápida y sucia a esto. Acabo de usar <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>

Espero que esto ayude

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top