Question

我有以下代码： -

$(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>

因此，单击选项卡会隐藏并显示不同的面板。它适用于所有dektop浏览器。我也一直在测试Chrome移动仿真模式，它也可以正常工作。但它不适用于实际的移动设备，我一直在测试Iphone 5和ipad mini。当您单击移动设备中的选项卡时，没有任何反应。我很感激为什么会出现这种情况。

Answer 1

此问题可能与某些移动浏览器无法按预期处理fadeIn / fadeOut方法有关。将其更改为显示/隐藏，看看它是如何进行的。

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

Answer 2

我找到了答案。

使用： -

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

而不是： -

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

好像已经修好了

Answer 3

这是不符合要求的代码：

$(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
});

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

jQuery onclick适用于移动仿真模式，但不适用于实际的移动设备

3 个答案: