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>