【問題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;后面沒有其他操作 }