如何监听UL里面的li点击事件。
List点击时候需要知道用户点击了哪一行那一列的哪个li。
找了半天也没找到样例。
另外搜索里面能不能用模糊搜索？
车仔
- 发布：2014-10-18 17:39
- 更新：2015-09-24 09:30
- 阅读：21260
仔细看我的回复代码。
{{{
mui('#ul1').on('tap','li',function(){
//this上下文就是li
//业务代码
mui.toast(this.innerHTML);
});
}}}
{{{
$('#ul').on('tap','li',function(){
//this上下文就是li
//业务代码
});
}}}
-
<ul class="mui-table-view tableList">
<li class="mui-table-view-cell table">
</li>
</ul>
给ul和li都加了第二个class，如果要用第二个class绑定on事件，为什么不起作用？
我是这样写的：
$('.tableList').on('tap','.table',function(){
$.alert(this.getAttribute('id'));
})2018-10-29 14:18
-
车仔 (作者)
能提供一个完整的样例吗？我可以监听ul的点击事件，可是如何判断点击了哪一个li？
{{{
<ul id="MyMenu" class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell mui-media mui-navigate-right">
<a href="#">item1</a>
</li>
<li class="mui-table-view-cell mui-media mui-navigate-right">
<a href="#">item2</a>
</li>
</ul>
}}}
{{{
document.getElementById("MyMenu").addEventListener('tap', function() {
// 如何判断点击了哪一个li？
});
}}}
车仔 (作者)
我看样例中是对每一个li都给予了监听事件，我想要的效果是监听ul，然后判断是第几个li被点击，并要找到这个li里面的a的文本内容。
我看见你们的样例里面也没用tap，直接用的onclick。
{{{
document.getElementById("MyMenu").addEventListener('tap', function() {
var a = this.querySelector('a');
});
}}}
车仔 (作者)
不管点击到哪个li，监听捕获的都是第一个li的内容。请帮我看看问题出在哪里吗？
{{{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
document.getElementById("ul1").addEventListener('tap', function() {
var li = this.querySelector('li');
mui.toast(li.innerHTML.toString());
});
});
</script> </head>
<body>
<ul id="ul1" class="mui-table-view">
<li class="mui-table-view-cell">1</li>
<li class="mui-table-view-cell">2</li>
<li class="mui-table-view-cell">3</li>
<li class="mui-table-view-cell">4</li>
</ul>
</body>
</html>
}}}
动态添加li时，把li的id和i绑定
for (var i = 0, len = logList.length; i < len; i++) {
var li = document.createElement('li');
li.id = i;
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">' + logList[i].ADDRESS + '</a>';
table.appendChild(li);
}
点击时通过this.id判断是哪个
mui('#list').on('tap', 'li', function() {
mui.toast(this.id);
var log = logList[this.id];
mui.openWindow({
url: 'log_details.html',
id: 'log_details',
extras: {
log: log
}
});
});
星空学者
谢谢你，你这个方法很好，解决了我的问题。
2015-10-10 15:08