pjax+layui遇到的坑

觀點1：當使用layui中elment.on或form.on事件（也就是所有利用layui里面的on去綁定事件）時，利用pjax加載頁面，並且多個頁面包含相同

lay-filter元素時，某一個頁面綁定的lay-filter元素事件處理程序會在其他未綁定任何事件處理程序的相同lay-filter元素上起作用。

觀點2：

layui里面的on綁定事件只有最后一次綁定的生效，與jquery里面的on綁定同一事件多次，則會多次生效的結果不同。

下面舉例：

頁面1DOM結構如下：

<form data-pjax class="layui-form" action="admin/role">
    <div class="layui-form-item">
   　　 <div class="layui-inline">
        　　<label class="layui-inline">名稱</label>
        　　<div class="layui-inline" style="width: 300px;">
        　　　　<input type="text" name="name" placeholder="請輸入角色名稱搜索"  autocomplete="off" class="layui-input" value="#(name??)" />
　　　　　　</div>
　　　　　　<div class="layui-inline">
　　　　　　　　<button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">
　　　　　　　　　　<i class="layui-icon">&#xe615;</i>搜索
　　　　　　　　</button>
　　　　　　</div>
　　　　</div>
　　</div>
</form>            

里面包含一個lay-filter為searchBtn的元素

頁面2DOM結構如下：

<form data-pjax class="layui-form" action="admin/role">
    <div class="layui-form-item">
   　　 <div class="layui-inline">
        　　<label class="layui-inline">名稱</label>
        　　<div class="layui-inline" style="width: 300px;">
        　　　　<input type="text" name="name" placeholder="請輸入角色名稱搜索"  autocomplete="off" class="layui-input" value="#(name??)" />
　　　　　　</div>
　　　　　　<div class="layui-inline">
　　　　　　　　<button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">
　　　　　　　　　　<i class="layui-icon">&#xe615;</i>搜索
　　　　　　　　</button>
　　　　　　</div>
　　　　</div>
　　</div>
</form> 

 里面包含一個lay-filter為submitBtn的元素。

說明：其中頁面1無任何事件綁定，

頁面2利用一下代碼，綁定了表單提交事件（這里故意綁定了頁面1中存在的元素）

form.on("submit(searchBtn)",function(){
   alert("我是頁面2的事件處理程序"); 
})

 

 實驗：

當進入頁面1點擊搜索按鈕時，頁面正常進行pjax提交；當進入頁面2再返回頁面1時，點擊搜索按鈕會彈出提示框(我是頁面1的事件處理程序）。

這就說明頁面2綁定的事件在頁面1已經起作用了，這就驗證了我們觀點1。

繼續：

如果在頁面1中添加如下事件綁定代碼

form.on("submit(searchBtn)",function(){
   alert("我是頁面1的事件處理程序"); 
})

 這個時候不管是 打開頁面1-打開頁面2-回到頁面1，還是打開頁面2-打開頁面1；點擊頁面1的搜索按鈕都只會彈出提示框（我是頁面2的事件處理程序）。

這就驗證了觀點2：只會最后一次事件處理程序生效。

解決辦法：

1 如果頁面不會對該元素進行事件處理，則不要設置lay-filter屬性，或則每個頁面元素設置唯一的lay-filter值。

2  經過對layui源碼分析，發現之所以出現這種跨pjax頁面事件串行，是因為layui對事件進行了cache，我們只需要在pjax加載頁面之前清空cache事件即可，代碼如下

layui.use(['element'], function() {
    $(document).on('pjax:start', function() { 
        layui.cache.event={};
    });
}) 

 建議按照方法1進行，方法2沒有經過大量測試，不知道是否會有其他BUG或者性能影響，畢竟不是前端程序員，對於這些不熟，望見諒，其他同學也可以發表自己建議。