jQuery onclick 在移动仿真模式下工作，但不能在实际的移动设备上工作答案

【问题标题】：jQuery onclick works in mobile emulation mode but not on an actual mobile devicejQuery onclick 在移动仿真模式下工作，但不能在实际的移动设备上工作
【发布时间】：2018-03-28 00:12:05
【问题描述】：

我有以下代码：-

$(function () {

   $(document).on('click', '.lnk_homeTabSelect', function () {

       var panel = $(this).data("panel")
       $(".dv_panel_selected").fadeOut(200, function () {
           $("#" + panel).fadeIn(200)
           $(".dv_panel_selected").removeClass("dv_panel_selected")
           $("#" + panel).addClass("dv_panel_selected")
       })

    })

})

<div id="dv_tabs">
    <div><a class="lnk_homeTabSelect" data-panel="Panel1">Panel 1</a></div>
    <div><a class="lnk_homeTabSelect" data-panel="Panel2">Panel 2</a></div>
    <div><a class="lnk_homeTabSelect" data-panel="Panel3">Panel 3</a></div>
</div>


<div id="Panel1" class='dv_panel_selected'>Content for panel 1</div>
<div id="Panel2">Content for panel 2</div>
<div id="Panel3">Content for panel 3</div>

因此，单击选项卡会隐藏和显示不同的面板。它在所有桌面浏览器中都能正常工作。我也一直在 Chrome 移动仿真模式下进行测试，它在那里也可以正常工作。但它不适用于实际的移动设备，我一直在 Iphone 5 和 ipad mini 上进行测试。当您单击移动设备中的选项卡时，没有任何反应。我很感激任何关于为什么会这样的想法。

【问题讨论】：

你可以试试tap

标签： jquery mobile

【解决方案1】：

这是非性能代码：

$(document).on('click', '.lnk_homeTabSelect', function () {

   var panel = $(this).data("panel")
   $(".dv_panel_selected").fadeOut(200, function () {
       $("#" + panel).fadeIn(200)
       $(".dv_panel_selected").removeClass("dv_panel_selected")
       $("#" + panel).addClass("dv_panel_selected")
   })
});

因为你告诉浏览器的是..

捕捉通过每个 DOMElement 冒出的每个单击事件，然后检查该元素是否为 .dv_panel_selected。

即使使用动态 dom 元素操作（添加/删除 HtmlElements），也没有人应该这样做。如果你不做动态元素操作，那么你可以简单地做：

$('.lnk_homeTabSelect').on('click', function () {

   // add simi-colons at the end of your statements
   // its good programming practice and avoids 
   // https://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript
   var panel = $(this).data("panel"); // <- semicolon

   $(".dv_panel_selected").fadeOut(200, function () {
       // combine statements so you don't do multiple
       // lookups to the same elements, not a huge performance gain
       // but definitely helps with debugging and readability
       $("#" + panel)  
         .fadeIn(200)
         .addClass("dv_panel_selected");
       $(".dv_panel_selected").removeClass("dv_panel_selected");
   }); 
});

感谢您的回答。如果元素是动态的，我应该使用什么来检测点击？

通常，您会将特定的动态元素添加到另一个元素。例如，将输入按钮添加到表单。那么表单就变成了容器：

$('#myForm').on('click', 'input[type=button]', function() {
  var $this = $(this);
  //where $this = the input/button that was clicked
});

目标是减少点击事件必须冒泡到容器的父元素数量。元素越多，代码的性能就越差。

【讨论】：

感谢您的回答。如果元素是动态的，我应该使用什么来检测点击？
添加了动态元素方法。

【解决方案2】：

此问题可能与某些移动浏览器未按预期处理淡入/淡出方法有关。改为显示/隐藏，看看效果如何。

$(".dv_panel_selected").hide(200, function () {
     $("#" + panel).show(200);
     $(".dv_panel_selected").removeClass("dv_panel_selected");
     $("#" + panel).addClass("dv_panel_selected");
});

【讨论】：

【解决方案3】：

我找到了答案。

使用这个：-

$(".lnk_homeTabSelect").click(function () {

而不是这个：-

$(document).on('click', '.lnk_homeTabSelect', function () {

好像解决了

【讨论】：

是的，这两段代码非常不同。实际上首选版本是$('.lnk_homeTabSelect').on('click', function(){ ... });