L'événement Onclick fonctionne et ne fonctionne pas sur le même code

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

  •  21-12-2019
  •  | 
  •  

Question

J'ai cette page où j'ai un menu (utilisant Pure) et j'ai des liens qui, lorsque vous cliquez dessus, exécutent un javascript pour changer une image sur la page.Pour une raison quelconque, lorsque le code se trouve dans le menu Pure, il ne s'exécute pas.Lorsqu'il est en dehors du menu, il fonctionne sans problème.

Avez-vous une idée de la raison pour laquelle cela se produit ou des conseils pour une solution plus élégante ?

<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>
Était-ce utile?

La solution

Je pense que votre problème est lié à la façon dont le widget YUI Menu est créé.Si vous regardez le code rendu, vous pouvez voir que vos balises d'ancrage n'ont pas le onclick attribut plus :

syntaxe originale (a onclick)

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

élément de menu yui rendu (n'a pas de clic)

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

Cela étant dit, vous avez plusieurs choix :

  • plongez dans l'API YUI pour trouver un moyen d'ajouter des attributs à vos éléments de menu (recommandé)

  • utilisez le href pour exécuter votre fonction javascript :

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

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