使用jquery

Question

这是我的html代码示例我想获取数据li click事件。但它并不火，甚至不知道哪里出错。

<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>

  

这是我的jquery代码示例我尝试过的。请帮助完成此代码。

$('.ordersubmitbytable')
    .click(function() {
      var tableid = $(this).closest('li').data('tableid');
      alert(tableid);
    });

Answer 1

$('.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>

使用attr()代替.data()

Answer 2

你没有关闭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>

Answer 3

首先关闭ul标记，然后使用此脚本

$('.ordersubmitbytable').click(function(e) {
  e.preventDefault();
  var tableid = $(this).parents('li').data('tableid');
  alert(tableid);
});

Answer 4

$(document).on('click','.ordersubmitbytable', function (event) { 
    var tableid = $(this).closest('li').attr('data-tableid');
    alert(tableid);
});