검도 UI 메뉴 항목 선택 문제

-1

문제 : 검도 메뉴 항목의 이미지를 클릭하면 선택 이벤트가 트리거되지 않습니다.검도 UI 메뉴 항목 선택 문제

내가 시도 것을 :

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/menu/images"> 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
    <title></title> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" /> 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" /> 

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script> 
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
</head> 
<body> 
    <div id="example"> 
     <div class="demo-section k-content"> 
      <h4>Menu with images</h4> 
      <ul id="menu-images"></ul> 
     </div> 
     <script> 
      $("#menu-images").kendoMenu({ 
       dataSource: [ 
       { 
        text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png", 
        items: [ 
        { 
         text: "Top News", 
         imageUrl: "../content/shared/icons/16/star.png", 
         select: function (e) { 
          alert('Clicking on image select event is not triggering') 
         } 
        }, 
        { text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" }, 
        { text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" }, 
        { text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }] 
       },] 
      }); 
     </script> 
     <style> 
      #menu-sprites .k-sprite { 
       background-image: url("../content/shared/styles/flags.png"); 
      } 
      .brazilFlag { 
       background-position: 0 0; 
      } 
      .indiaFlag { 
       background-position: 0 -32px; 
      } 
      .netherlandsFlag { 
       background-position: 0 -64px; 
      } 
      .historyIcon { 
       background-position: 0 -96px; 
      } 
      .geographyIcon { 
       background-position: 0 -128px; 
      } 
     </style> 
    </div> 
</body> 
</html>

설명 아래의 샘플 코드를 참조하십시오

나는 Telerik 데모에서 가져온이 코드 샘플을 편집했습니다. 위 코드에서 골프 항목을 추가했습니다. 그것은 또한 내가 말하는 것에 대한 선택 기능을 가지고 있습니다. 이것을 실행 한 후에 "Top News"텍스트를 클릭하면 경고가 트리거됩니다. 이미지를 클릭하거나 선택할 때 경고가 작동하지 않습니다.

Telerik 포럼 게시는 허가 된 사용자에게만 적용됩니다. 나는 없다.

신체가 이러한 문제를 일으키는 지 알려주세요. 당신은 dataSource 항목 내에서 이벤트 선언을 중첩 한 것처럼

감사 데브

출처

2017-02-09 Devanathan.S

보인다.

선언을 메뉴 수준으로 옮기면 제대로 작동합니다.

$("#menu-images").kendoMenu({ 
      select: function(e) { 
       alert($(e.item).children('.k-link').text())     
      } 
      dataSource: [ 
      { 
       text: "Golf", imageUrl: "../content/shared/icons/sports/golf.png", 
       items: [ 
       { 
        text: "Top News", 
        imageUrl: "../content/shared/icons/16/star.png" 
       }, 
       { text: "Photo Galleries", imageUrl: "../content/shared/icons/16/photo.png" }, 
       { text: "Videos Records", imageUrl: "../content/shared/icons/16/video.png" }, 
       { text: "Radio Records", imageUrl: "../content/shared/icons/16/speaker.png" }] 
      },] 
     });

$(e.item)을 사용하면 어떤 항목을 선택했는지 파악할 수 있습니다. 온라인 데모의 이벤트 섹션을보십시오. http://demos.telerik.com/kendo-ui/menu/events

출처

2017-02-09 15:02:33 Alan

검도 UI 메뉴 항목 선택 문제

답변

관련 문제