Событие Onclick работает и не работает с одним и тем же кодом

У меня есть эта страница, где у меня есть меню (с использованием Pure), и у меня есть несколько ссылок, при нажатии которых запускается JavaScript, чтобы изменить изображение на странице. По какой-то причине, когда код находится внутри меню Pure, он не запускается. Когда он находится вне меню, он работает без проблем.

Есть идеи, почему это происходит, или есть советы для более элегантного решения?

<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>
Источник

1 ответ

Решение

Я думаю, что ваша проблема связана с тем, как создается виджет YUI Menu. Если вы посмотрите на визуализированный код, то увидите, что ваши теги привязки не имеют onclick атрибут больше:

оригинальный синтаксис (имеет onclick)

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

визуализированный пункт меню yui (не имеет щелчка мышью)

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

При этом у вас есть несколько вариантов:

  • Погрузитесь в API YUI, чтобы найти способ добавить атрибуты к вашим пунктам меню (рекомендуется)

  • используйте href для выполнения вашей функции JavaScript:

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

Источник
Другие вопросы по тегам