Jquery Mobile 中綁定事件

今天遇到了jmobile中綁定事件的問(wèn)題,

參考:http://liyunpeng.iteye.com/blog/1964165

對(duì)頁(yè)面中的綁定事件有了大概了解,不過(guò)這篇帖子年代久遠(yuǎn),很多不是很詳細(xì),特此記錄.

首先查到j(luò)mobile中的所有可以用.on()動(dòng)態(tài)綁定的所有事件,

詳情參考:http://www.runoob.com/jquerymobile/jquerymobile-ref-events.html

按以前的理解照抄,結(jié)果死活出不來(lái)效果,認(rèn)真查看示例發(fā)現(xiàn)需要加"pageinit"事件

$(document).on("pageinit","#pageone",function(){
  $("p").on("tap",function(){
    $(this).hide();
  });                       
});

大概解釋一下這幾句代碼,on的使用方式和jqeury一樣,中間的參數(shù)是子集選擇器,和jquery不一樣的是,單擊事件名字成了tap(敲擊),還有個(gè)vclick(虛擬化的 click 事件處理器),親測(cè)這2個(gè)事件效果是一樣,還有如下

現(xiàn)在好了,可以完成自己的想法了;可是問(wèn)題又來(lái)了,在有些時(shí)候會(huì)發(fā)現(xiàn)單擊事件會(huì)觸發(fā)2次....繼續(xù)度娘,發(fā)現(xiàn)相同的情況好多,主要原因是頁(yè)面初始化事件么有解綁定,與on對(duì)應(yīng)的是off事件

參考:http://bbs.csdn.net/topics/390499499   完美解決

$(document).on("pageinit","#pageone",function(){
  $("p").on("tap",function(){
    $(this).hide();
  });                       
}).on("pageinit", "#page2", initPage2);

function initPage2(event) {

       $(document).off('pageinit', '#page2', initPage2);

        //在第二個(gè)頁(yè)面需要綁定的事件代碼

       alert("page2 init" + event.target.baseURI);

};

PS:在查閱相關(guān)文檔時(shí)發(fā)現(xiàn)個(gè)jmobile獨(dú)有的選擇器:jqmData,可以這樣用

alert( $(":jqmData(role='content')").length)

最后一句,充分說(shuō)明:我們不生產(chǎn)代碼,只是谷歌(被墻以后現(xiàn)在是度娘)的搬運(yùn)工~~