jq+layui之table表每行的編輯按鈕只能點擊觸發一次的問題的解決


 

【問題1描述】

  在寫好表之后,測試時會發現,當你點擊第一行的“修改”,突然不想修改了,關閉了“修改”的彈窗,但是這時候你想到剛才第一行的修改還有地方要修改,你重新點擊“修改”按鈕,這時候它似乎故意跟你過不去似的,修改的彈窗不出現了。

  干着急沒用啊,我們要解決問題。

【問題出現的原因】

  為什么會出現這個問題呢?我們來共同探索一下。

  在“修改”按鈕的事件里面,我們遍歷$(".layui-table-body tr")這個DOM元素,並打印出這個DOM元素的內容。我們點擊第一行的修改之后,關閉彈窗,點擊第二行,再關閉彈窗,再點擊第三行。控制台的打印如下:

 

  由此可見,當“修改”按鈕的事件被觸發時,相應的tr就會被掛上layui-table-hover這個類。

【解決方法】

  回歸到我們出現bug的操作流程,我們把目標轉向第一行,點擊“修改”按鈕,關閉彈窗,再一次點擊剛才點擊過的同一個“修改”按鈕。這個問題我們用一行代碼$(".layui-table-body tr").removeClass('layui-table-click');來解決問題。

【問題2描述】

  關鍵問題(什么問題題目寫得很清楚呢)解決完了,可是,你也許會遇到另外一個問題,在點擊“取消”或者右上角的關閉按鈕時,不能關閉彈窗,而是要再點擊一次,才能關閉。這個問題不是人人都會遇到,但如果你的layer.open({...})寫在for循環內,就有可能會遇到。

 

  (ps:由於功力尚淺,能想到的第一解決方案就是用e.preventDefault();但是沒能實現,我的直覺告訴我,應該是可以的。哈哈哈,我的直覺不一定准,繼續回到正文)

【解決方法】

  解決的辦法就是在操作二的最后添加一行return false;

for(...){
//操作1
return false;
//return false;后面沒有其他操作
}

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM