jquery 的 body on click 在手機瀏覽器失效？

jquery3.1.1 jquery js

火爆浪子 2019-10-25 12:24:17 ‧ 2479 瀏覽

分享至

// step 1
$('body').on('click', '.mobile-all-btn', function(e) {
        $(this).removeClass('mobile-all-btn').addClass('un-mobile-all-btn');
        // do
    });
// step 2
$('body').on('click', '.un-mobile-all-btn', function(e) {
        $(this).removeClass('un-mobile-all-btn').addClass('mobile-all-btn');
        // do
    });

這個在電腦上的瀏覽器可以運行
用谷歌的檢查去模擬手機，也可以運行⋯⋯
但是手機的瀏覽器（safari）卻無法運行？點了沒有預期的反應，step 1 就失效了
這是為什麼呢？
jquery 3.4.1

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2019-10-25 12:40:13 檢舉

try 'touchstart' or 'touch'
https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:45:21 檢舉

touch 沒反應
touchstart 有點怪，我點的之後確實變成 un-mobile-all-btn，但我放開時又回去 mobile-all-btn⋯⋯

小魚 iT邦大師 1 級 ‧ 2019-10-25 13:18:58 檢舉

你有在電腦的Safari瀏覽器上測試嗎?

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:20:04 檢舉

有，也正常可以用

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-10-25 13:25:55 檢舉

電腦版上的 Safari瀏覽器，是測不準的。
最多就是有問題可以查出來。但就算他是正常的。也不代表在ios上就一定是正常。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

咖咖拉

iT邦好手 1 級 ‧ 2019-10-25 13:02:46

最佳解答

這樣寫手機可以觸發沒問題
https://codepen.io/ipphof/pen/WNNjgLB

點不到應該是被其他DIV擋住了

簡單的測試給
un-mobile-all-btn
mobile-all-btn
下一個CSS

    position: relative;
    z-index: 999999;

手機看能不能按到

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:23:07 檢舉

我的是 table
寫得很爛就是了

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:24:05 檢舉

https://github.com/asys0512/q1
index-mobile.html
電腦瀏覽時「全選」「上午」「下午」是可以正常運行
但是當手機瀏覽時，這三個按鈕完全失效
詭異的是 th-btn 跟 time-btn 是手機跟電腦都有用到，在 choose-common.js
在手機上這兩個 class 卻可以運行⋯⋯這兩個事件是一樣的

咖咖拉 iT邦好手 1 級 ‧ 2019-10-25 14:01:34 檢舉

我測試是可以點的耶 safari

你..的..暫存?

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 15:55:26 檢舉

我從早上到現在，緩存也太久，還是不能點⋯⋯詭異

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 15:56:02 檢舉

我用隱私模式也是一樣不行點耶，你的竟然可以

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-10-25 12:43:04

將 $('body')直接改成 $(document)
試試。

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:46:28 檢舉

也是一樣呢

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:49:34 檢舉

奇怪，電腦怎麼樣檢查都是可以運行的呀⋯⋯

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-10-25 12:52:26 檢舉

先加個alert或console看看是否有觸發事件。
我擔心的是，其實事件有觸發。但css有問題，導致你認為沒做用。

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:58:01 檢舉

我有確認電腦版一切都是可以運行，css 也沒有問題～我可能丟個程式上來好了，很怪的是我還有其他的一樣的事件（只是不同 css）卻在手機上可以運行？！

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-10-25 13:02:57 檢舉

先確定是事件沒觸發還是css的問題。將問題根本找出來。然後再對症下藥，不要自已覺得怎麼怎麼就是對的。
像我上面說的就是為了要處理觸發問題。
但如果本來就是有觸發了，結果你一直想要找觸發事件的問題。不是本末倒置了嘛?
畢竟你是在 safari 瀏覽器上才會這樣。所以我突然想到你該不會是css的問題。並不是事件觸發的問題。

電腦板並無法去模擬 ios 系統的情況。所以就算它是正常的。也不代表在ios就會正常。css使用是一門學問。