Jquery click event for attribute with class

Question

How can I write for click event attribute with class.i did but it is calling all same class click event.How to resolve this? http://jsfiddle.net/h4JXs/10345/

 $(document).on('click', 'a[data-car="blue"].plus', function(e) { e.stopImmediatePropagation(); alert("car blue"); }); $(document).on('click', 'a[data-bike="blue"].plus', function(e) { e.stopImmediatePropagation(); alert("car bike"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a data-car="blue" class="plus">car </a> <a data-bike="blue" class="plus">bike </a> 

Answer 1

This may not be best solution but you can try this way.

$(document).on('click','.plus').click(function(e){ 
  if($(this).data('car') == 'blue'){
    e.stopImmediatePropagation();
    alert("car blue");
  }  
});  

$(document).on('click','a[data-bike="blue"].plus').click(function(e){ 
  if($(this).data('bike') == 'blue')  {
    e.stopImmediatePropagation();
    alert("car bike");
  }
});

Answer 2

Go with my JSFiddle may be it can help you.

JS Code -

$(document).on('click','a[data-car="blue"].plus',function(e) {
  e.stopImmediatePropagation();
  alert("car blue");
});

$(document).on('click','a[data-bike="blue"].plus',function(e) {
  e.stopImmediatePropagation();
  alert("bike blue");
});