JQuery 添加/刪除 class 在 Chrome Mobile 上無法正常工作

Question

 $('.notice-label').addClass('hide') $('#loc-create-boolean').on('click', (e) => { let locBoolean = $('#loc-create-boolean').find(':selected').text(); if (locBoolean === 'Yes') { $('.notice-label').removeClass('hide') } else { $('.notice-label').addClass('hide') } })

 .hide { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="violation-dropdown-cont"> <p id="loc-create">Was a notice created for this location?<span class="required"> *</span></p> <select name="loc-create" id="loc-create-boolean"> <option value="" disabled selected class="loc-boolean-dropdown">Select One</option> <option value="Yes" class="loc-boolean-dropdown">Yes</option> <option value="no" class="loc-boolean-dropdown">No</option> </select> </div> <span class="notice-label">Message</span>

我已經構建了一個移動應用程序，該功能在 Chrome 開發工具（桌面）上測試正常，但是當我發布該網站並在我的手機上訪問它時， .removeClass和.addClass無法處理點擊事件。 它有效，但僅在第二次單擊時有效。

為什么點擊事件會在桌面開發環境中按預期工作，但在實際的 Android 設備上卻沒有任何線索？

Answer 1

click 事件可能並不總是用於表示對 Android 的點擊。要解決您的問題，請收聽 touchend 事件。

例子：

 $('.notice-label').addClass('hide') $('#loc-create-boolean').on('click', (e) => { let locBoolean = $('#loc-create-boolean').find(':selected').text(); if (locBoolean === 'Yes') { $('.notice-label').removeClass('hide'); } else { $('.notice-label').addClass('hide') } }); // Somee thing like this, also check othe touch option as per your requirement. $(document).on("touchend", function(e) { var target = $(event.target).attr('id'); if (target === "loc-create-boolean") $('#loc-create-boolean').trigger('click'); });

 .hide { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="violation-dropdown-cont"> <p id="loc-create">Was a notice created for this location?<span class="required"> *</span></p> <select name="loc-create" id="loc-create-boolean"> <option value="" disabled selected class="loc-boolean-dropdown">Select One</option> <option value="Yes" class="loc-boolean-dropdown">Yes</option> <option value="no" class="loc-boolean-dropdown">No</option> </select> <span class="notice-label">Message</span> </div>