jQueryのclick（）メソッドで$（this）.data（value）の値が未定義

Question

私のRails 5アプリでは、ユーザをその場所に基づいてサイトの特定の部分に誘導する動的メニューを構築しています。彼らがホームページからメニューアイテムをクリックすると、私たちが納品する4つの場所の1つを選択するモーダルが表示されます。次に、clickメソッドを使用する関数は、データ属性を取得し、URLパスに挿入してリダイレクトする必要があります。ハードコーディングされたとしても、データ属性が通過するようには見えない - 私はただコンソールで定義されていない。

ここではモーダルコードは含まれていません。これは問題ではないためです。コンソールのように、パスに/ undefined/undefined /を挿入して挿入します。私の問題は、thisデータ値を取得することです。

自体に_sidebar.html.erb

<div id="ss_menu"> 
    <% @cat.each do |c| %> 
    <div class="ss_button"><%= c.name %></div> 
    <div class="ss_content"> 
     <ul> 
     <% c.subcategories.each do |s| %> 
      <li> 
      <a href="#" 
       data-id="<%= s.id %>" 
       data-category="<%= c.slug %>" 
       data-subcategory="<%= s.slug %>" 
       data-toggle="modal" 
       data-target=".mlc-modal"><%= s.name %></a> 
      </li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 
</div> 

スクリプト

<script type="text/javascript" charset="utf-8"> 
    $(document).on("click", ".ss_button", function() { 
     var id = $(this).data('id'); 
     var category = $(id).data('category'); 
     var subcategory = $(id).data('subcategory'); 
     console.log(id); 
     console.log(category); 
     console.log(subcategory); 
     $('.modal-content a').attr('href', function() { 
      return this.href + category + '/' + subcategory; 
     }); 
    }); 
</script> 

Answer 1

ここ

var id = $(this).data('id'); 

$(this)何data-id属性を持たない<div class="ss_button">を指します。

したがって、出力は常にundefinedとなります。

Answer 2

ss_button要素は、任意のデータの性質を持っていません。したがって、<div class="ss_button">を参照するその関数内のthisは、データプロパティを持たない要素を指しています。だから$(this).data('id')はundefinedを返します。