1. 程式人生 > >jq+layui之table表每行的編輯按鈕只能點擊觸發一次的問題的解決(未完待續)

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

控制臺 技術分享 目標 分享圖片 地方 觸發 div 一次 可見

技術分享圖片

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

  幹著急沒用啊,我們要解決問題。

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

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

技術分享圖片

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

  回歸到我們出現bug的操作流程,我們把目標轉向第一行,點擊“修改”按鈕,關閉彈窗,再一次點擊剛才點擊過的同一個“修改”按鈕……(未完待續)

  預告:

  一行代碼$(".layui-table-body tr").removeClass(‘layui-table-click‘);解決問題

  

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