对html文件中dom元素设置监听遇到的问题

1.使用builder提供的mui框架制作app，对dom元素使用onclick单击监听是无效的。使用 tap 代替click。

2.在使用.on()方法实现批量元素的事件绑定时：

.on( event , selector , handler )

event

Type: String

需监听的事件名称，例如：’tap’

selector

Type: String

选择器

handler

Type: Function( Event event )

事件触发时的回调函数，通过回调中的event参数可以获得事件详情

官网提供例子：

mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = this.getAttribute("id");
//传值给详情页面，通知加载新数据
mui.fire(detail,'getDetail',{id:id});
//打开新闻详情
mui.openWindow({
id:'detail',
url:'detail.html'
});
})

我个人在使用类名选择器时，错用类名，比如某个按钮样式class = ‘mui-btn mui-btn-warning’ 我错用‘.mui-btn mui-btn-warning’作为了on方法中的selector ，而正确写法只能写一个class名称，不允许有空格。这一点我需要记住。

项目中我有一段代码：

html += "<a class='mui-btn mui-btn-warning' id='" +           val['doctorid'] + "&" + val['clinicid'] + "'>" +
"<span class='fa fa-hospital-o'></span>" +s['servicename'] +"</a>";

这是一个动态追加的dom，是遍历添加多个，对此批量添加监听：

mui(".mui-table-view").on('tap','mui-btn-warning',function(){
var id = this.id;
var ids = id.split("&");
var doctorId = ids[0];
var clinicId = ids[1];
plus.webview.close("clinicAppointment.html");
var clinicApp = plus.webview.create("clinicAppointment.html", "clinicAppointment.html");
//传值给详情页面，通知加载新数据
mui.fire(clinicApp, 'getDetail', {
doctorId: doctorId,
clinicId: clinicId
});
});

3. mui("#list").off("tap"); //取消tap监听
页面dom元素多次加载后，dom元素也能多次被tap监听到；为避免重复被监听，可在加载之前取消监听事件。
.off( event , selector , handler )
event
Type: String
需取消绑定的事件名称，例如：'tap'
selector
Type: String
选择器
handler
Type: Function
之前绑定到该元素上的事件函数，不支持匿名函数
version added: 2.0.0 .off( event , selector)
event
Type: String
需取消绑定的事件名称，例如：'tap'
selector
Type: String
选择器
version added: 2.2.0 .off( event )
event
Type: String
需取消绑定的事件名称，例如：'tap'
version added: 2.2.0 .off( )
空参数，删除该元素上所有事件

mui(“#list”).off(“tap”,”li”,foo_1);

//点击li时，foo_2、foo_2两个函数均不再执行

mui(“#list”).off(“tap”,”li”);

//点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数

mui(“#list”).off(“tap”);

//点击li时，不再执行foo_1函数；点击p时，也不再执行foo_3函数；双击li时，也不再执行foo_4函数；

mui(“#list”).off();

“`

4.dom元素在加载完成之后方能成功完成监听。在添加监听事件代码需考虑到这一点