0

here is my html code sample i want to get data li click event. but its not fire even don't know where is error.

<ul id="menuitem" class="metro-sidenav clearfix tablenamecontent">
<li data-tableid="1"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T1</a></li>
<li data-tableid="2"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T2</a></li>
<li data-tableid="3"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T3</a></li>
<li data-tableid="4"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T4</a></li>
<li data-tableid="5"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T5</a></li>   
</ul>

here is my jquery code sample what i have tried. please help through this code.

$('.ordersubmitbytable')
    .click(function() {
      var tableid = $(this).closest('li').data('tableid');
      alert(tableid);
    });
1
  • Try : var tableid = $(this).closest('li').attr('data-tableid'); Feb 28, 2017 at 7:18

4 Answers 4

2

$('.ordersubmitbytable').click(function() {
    var tableid = $(this).closest('li').attr('data-tableid');
    alert(tableid);
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menuitem" class="metro-sidenav clearfix tablenamecontent">
  <li data-tableid="1"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T1</a></li>
  <li data-tableid="2"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T2</a></li>
  <li data-tableid="3"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T3</a></li>
  <li data-tableid="4"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T4</a></li>
  <li data-tableid="5"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food"></i>T5</a></li>
</ul>

use attr() instead of .data()

6
  • thats my question if i use data-* Attributes why do i need attr() instead of .data() would you please explain.thanks for your reply.
    – python gbs
    Feb 28, 2017 at 7:21
  • it depends on how you set setting it using .data("asd","1") you get it using .data("asd") otherwise use attr() betcause they are stored on different location so setting and getting is not same
    – guradio
    Feb 28, 2017 at 7:23
  • from my modal still not fire when i click li. dont nkow whats the problem. nut into the run code snippet its ok.
    – python gbs
    Feb 28, 2017 at 8:07
  • @pythongbs if your running on modal use event delegation change $('.ordersubmitbytable').click(function() { into $(document).on('click','.ordersubmitbytable',function() { then tell me what happens
    – guradio
    Feb 28, 2017 at 8:14
  • yes it worked. thanks anyway. but if i use class name table content instead document whats the different? just curiosity i did it -but not worked.
    – python gbs
    Feb 28, 2017 at 8:21
0

You didnt close the UL

$('.ordersubmitbytable').click(function(event) {
    event.preventDefault();
    var tableid = $(this).closest('li').data('tableid');
    alert(tableid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menuitem" class="metro-sidenav clearfix tablenamecontent">
  <li data-tableid="1"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food">  </i>T1</a></li>
  <li data-tableid="2"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food">      </i>T2</a></li>
  <li data-tableid="3"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food">  </i>T3</a></li>
  <li data-tableid="4"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food">  </i>T4</a></li>
  <li data-tableid="5"><a href="#" class="btn blue-violate ordersubmitbytable"><i class="icon-food">  </i>T5</a></li> 
</ul>

0

First close the ul tag then use this script

$('.ordersubmitbytable').click(function(e) {
  e.preventDefault();
  var tableid = $(this).parents('li').data('tableid');
  alert(tableid);
});
1
  • from my modal still not fire when i click li. dont nkow whats the problem. nut into the run code snippet its ok.
    – python gbs
    Feb 28, 2017 at 8:07
0
$(document).on('click','.ordersubmitbytable', function (event) { 
    var tableid = $(this).closest('li').attr('data-tableid');
    alert(tableid);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.