最近比較急的接手了公司的微信服務號項目，采用的技術棧主要是jq和vue。在項目中之前碰見過jq寫的$().on('click',function(){})點擊事件不起作用，只能寫在vue實例中的methods中，然后用@click去監測。
一直困惑的是這個BUG在不同的頁面中有時有，有時沒有，而且出現的情況很少。今天工作閑了一點，於是乎專心去琢磨這個問題。
網上百度到的解決方案是這樣的，如下圖：
於是乎自己試了一下確實可以。代碼如下圖：
但是回過頭來看項目就很奇怪，說的寫在JQ的dom加載完成函數中就可以，但是我的具體項目中為什么不行呢？而其他頁面的卻可以呢？
於是乎開始從繁至簡的減少代碼，想要減少的如上，頁面也簡化。jq寫的點擊事件就是如下的‘伙伴詳情’
這一列是v-for生成的，當把dataList直接改為數字后，點擊是可以生效的，於是開始考慮是dom渲染問題，之前也這樣猜想過，但沒有過去驗證到底是哪塊的問題。
如果dataList是請求后端數據生成的，那可能是時間差上有問題。
於是我在vue實例中的$this.nextTick中和jq點擊事件前分別打印時間。得到如下圖：
顯然jq點擊函數被讀取時，vue是還沒有完成dom更新。雖說$(function() {})代表着jq dom完成之后再去執行里面的代碼(所有代碼寫在這里面)，但這是vue和jq的混合開大，對於v-for生成的dom 來說需要等待拿到后端數據並且賦值給實例的dataList才能生成。
所以加載jq點擊事件時候，vue的dom還沒完成更新，所以就是無效的。點擊事件中的選取元素並不能拿到對應的dom元素。
上面的時間差是2毫秒。為了驗證以上的猜想，我直接給了10個毫秒的延遲（好像毫秒默認的有效最小是24），然后jq寫的點擊事情就有用了。
總結：較好的寫法還是通過vue的methods來寫點擊事件，不推薦jq寫。或者只能這樣了(form_vm是vue實例)
反思：對於在之前的頁面中寫的有效的jq點擊事件可能是頁面內容較少，拿的數據較少。但是個人總感覺可能其他地方還是有問題，或者說我的這個解決方法只是湊巧而已，甚至可能是錯誤的。所以若是您有任何指正的地方，歡迎留言！！！