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或者性能影響，畢竟不是前端程序員，對於這些不熟，望見諒，其餘同窗也能夠發表本身建議。