I'm using jQuery. I need to get the data-id of the clicked item and pass it to a webservice. How do I get the data-id attribute?

My HTML looks like this:

<ul class="nav nav-pills">
    <li class="onselectedCategory" data-id="12"><a href="javascript:;;">12</a></li>
    <li class="onselectedCategory" data-id="23"><a href="javascript:;;">23</a></li>
    <li class="onselectedCategory" data-id="34"><a href="javascript:;;">34</a></li>
    <li class="onselectedCategory" data-id="45"><a href="javascript:;;">45</a></li>
    <li class="onselectedCategory" data-id="56"><a href="javascript:;;">56</a></li>
</ul>

And my JavaScript looks like this:

events{
      "click li.onselectedCategory": "selectCategory"
    }

selectCategory: function(event){
      event.preventDefault();
        var _selectedValue = $(this).data('id'); 
        alert("Selected Value : "+_selectedValue);
    },

I'm using jQuery. I need to get the data-id of the clicked item and pass it to a webservice. How do I get the data-id attribute?

My HTML looks like this:

<ul class="nav nav-pills">
    <li class="onselectedCategory" data-id="12"><a href="javascript:;;">12</a></li>
    <li class="onselectedCategory" data-id="23"><a href="javascript:;;">23</a></li>
    <li class="onselectedCategory" data-id="34"><a href="javascript:;;">34</a></li>
    <li class="onselectedCategory" data-id="45"><a href="javascript:;;">45</a></li>
    <li class="onselectedCategory" data-id="56"><a href="javascript:;;">56</a></li>
</ul>

And my JavaScript looks like this:

events{
      "click li.onselectedCategory": "selectCategory"
    }

selectCategory: function(event){
      event.preventDefault();
        var _selectedValue = $(this).data('id'); 
        alert("Selected Value : "+_selectedValue);
    },

• javascript
• jquery
• backbone.js
• underscore.js
• marionette

• just remove the sharp. – TCHdvlp Commented Jul 15, 2014 at 14:18
• Don't you search first to get id and class in jQuery – Harshal Patil Commented Jul 15, 2014 at 14:24
• Are you using backbone.js? – Umesh Sehta Commented Jul 16, 2014 at 6:28
• yes, we are using backbone.js, backbone-maronette and underscore.js – user3652322 Commented Jul 16, 2014 at 6:32

3 Answers 3

Try this:

$(".onselectedCategory").click(function(){ 
    alert($(this).data("id")); 
});

onselectedCategory is a class, therefor you need to reference it with a . and not with the # which is used for ids.

change #data-id to data-id

 $(".onselectedCategory").click(function(){ 
   alert($(this).attr("data-id")); 
 })

Edit for backbone

 selectCategory: function(event){
        event.preventDefault();
        var selectedValue = "";
        if($(e.target).is('li')) {
            selectedValue =$(e.target).attr('data-id');
        } else {
           selectedValue =$(e.target).parent().attr('data-id');
        }       
        alert("Selected Value : "+ selectedValue);
    },

The onselectedCategory class must be within the label <a>

<li><a class="onselectedCategory" data-id="12" bla,bla,bla...</li>

$(".onselectedCategory").click(function(){ alert($(this).data("id")); });