El evento Onclick funciona y no funciona en el mismo código

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

  •  21-12-2019
  •  | 
  •  

Pregunta

Tengo esta página donde tengo un menú (usando Pure) y tengo algunos enlaces que, al hacer clic, ejecutan un javascript para cambiar una imagen en la página.Por alguna razón, cuando el código está dentro del menú Pure, no se ejecuta.Cuando está fuera del menú se ejecuta sin problema.

¿Alguna idea de por qué sucede esto o algún consejo para una solución más elegante?

<html>
<head>
<title>Dashboard</title>

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#demo-horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

});
</script>

<script>
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return; 
}
</script>

</head>
<body>

<div id="demo-horizontal-menu">
<a href="#" class="pure-menu-heading">Site Title</a>
    <ul id="std-menu-items">

        <li>
            <a href="#">Menu (Not Working)</a>
            <ul>

                <li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
                <li><a href="#" onclick="changeIt('2.jpg','image-dash');">Dashboard 2</a></li>
                <li><a href="#" onclick="changeIt('3.jpg','image-dash');">Dashboard 3</a></li>

            </ul>
        </li>
    </ul>
</div>

<div id="image-dash">
<img src="1.jpg" border="0">
</div>

<p>These links here will work for some reason..</p>
<ul>
<li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
<li><a href="#" onclick="changeIt('2.jpg','image-dash');">Dashboard 2</a></li>
 <li><a href="#" onclick="changeIt('3.jpg','image-dash');">Dashboard 3</a></li>
</ul>

</body>
</html>
¿Fue útil?

Solución

Creo que su problema está relacionado con cómo se crea el widget del menú YUI.Si echas un vistazo al código renderizado, podrás ver que tus etiquetas de anclaje no tienen la onclick atributo más:

sintaxis original (tiene onclick)

<li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>

elemento de menú de yui renderizado (no tiene onclick)

<li id="menuItem-yui_3_17_2_1_1402336941070_76" class="pure-menu-item" aria-hidden="false" aria-labelledby="yui_3_17_2_1_1402336941070_87" role="menuitem">
    <a href="#" class="pure-menu-label" data-item-id="menuItem-yui_3_17_2_1_1402336941070_76" id="yui_3_17_2_1_1402336941070_87">Dashboard 1</a>
</li>

Dicho esto, tienes algunas opciones:

  • Sumérgete en la API de YUI para encontrar una manera de agregar atributos a los elementos de tu menú (recomendado)

  • use href para ejecutar su función javascript:

    <a href="javascript:changeIt('1.jpg','image-dash');">Dashboard 1</a></li>

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