2017-02-09 8 views
-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フォーラムでの投稿は、ライセンスを取得したユーザーにのみ適用されます。私は持っていない。

身体がこのような問題を抱えているかどうか教えてください。

おかげ のDev

答えて

0

あなたはデータソース項目内イベント宣言を入れ子にしているように思えます。

宣言をメニューレベルに移動するだけで効果があります。

$("#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

関連する問題