Onclick 이벤트가 작동하지만 동일한 코드에서 작동하지 않습니다.
-
21-12-2019 - |
문제
이 페이지에는 메뉴(Pure 사용)가 있고 클릭하면 자바스크립트를 실행하여 페이지의 그림을 변경할 수 있는 링크가 있습니다.어떤 이유에서인지 코드가 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>
해결책
귀하의 문제는 YUI 메뉴 위젯이 생성되는 방식과 관련이 있다고 생각합니다.렌더링된 코드를 살펴보면 앵커 태그에 onclick
더 이상 속성:
원래 구문(onclick 있음)
<li><a href="#" onclick="changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
렌더링된 유이 메뉴 항목(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>
즉, 몇 가지 선택 사항이 있습니다.
- 메뉴 항목에 속성을 추가하는 방법을 찾으려면 YUI API를 살펴보세요(권장).
href를 사용하여 자바스크립트 기능을 실행하세요.
<a href="javascript:changeIt('1.jpg','image-dash');">Dashboard 1</a></li>
제휴하지 않습니다 StackOverflow