Das Onclick-Ereignis funktioniert und funktioniert nicht mit demselben Code

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

  •  21-12-2019
  •  | 
  •  

Frage

Ich habe diese Seite, auf der ich ein Menü habe (mit Pure) und einige Links, die beim Klicken ein Javascript ausführen, um ein Bild auf der Seite zu ändern.Aus irgendeinem Grund wird der Code nicht ausgeführt, wenn er sich im Pure-Menü befindet.Außerhalb des Menüs läuft es ohne Probleme.

Irgendwelche Ideen, warum das passiert, oder Tipps für eine elegantere Lösung?

<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>
War es hilfreich?

Lösung

Ich denke, dass Ihr Problem damit zusammenhängt, wie das YUI-Menü-Widget erstellt wird.Wenn Sie sich den gerenderten Code ansehen, können Sie sehen, dass Ihre Ankertags nicht über das verfügen onclick Attribut mehr:

Originalsyntax (hat Onclick)

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

gerenderter Yui-Menüpunkt (hat kein 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>

Davon abgesehen haben Sie einige Möglichkeiten:

  • Tauchen Sie ein in die YUI-API, um eine Möglichkeit zu finden, Attribute zu Ihren Menüelementen hinzuzufügen (empfohlen)

  • Verwenden Sie href, um Ihre Javascript-Funktion auszuführen:

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top