javascript - 移动设备上的奇怪的toggle()行为

Question

人们可以将项目添加到数据库中。我让他们选择在此时添加它，或手动选择日期。

因此我得到了这个 HTML 结构。 (请注意，我将日期和时间选择器妥协为只有一行文本)

<form action="..." method="post" class="feed">
    <div class="datetime">
        Select on what date to add:<br />
        <input type="radio" name="dateType" id="dtNow" value="now" checked />
        <label for="dtNow">Now</label><br />

        <input type="radio" name="dateType" id="dtSel" value="pickadate" />
        <label for="dtSel">Or pick a date:</label><br />
        <div>
            Date and time selector
        </div>
    </div>
</form>

下一个 jQuery 代码随之而来:

$(function() {
    $('.datetime div').hide();

    $('.datetime [type=radio]').on('change', function() {
        $('.datetime div').toggle( $('.datetime [type=radio]:checked').val() == 'pickadate');

    });
});

它在页面加载时隐藏 .datetime 内的 div。然后，当单选按钮更改时，它会显示或隐藏 div。

这在桌面上运行良好，但在移动设备(HTC One M8s，带有默认浏览器)上则不然。它显示额外的 div，但不会再次隐藏它。

当我在 toggle() 行之前添加 $('body').append(' '); 时，它确实有效。

有人对这种行为有解释吗？

JSFiddle .

Answer 1

您是否尝试过改变逻辑顺序？也许 jQuery 语法的链接有些可疑，或者默认的移动浏览器在没有附加 hack 的情况下无法与您扔给它的 jQuery 挂起。

$(function() {
  $('.datetime div').hide();

  $('.datetime [type=radio]').on('change', function(e) {
    t = ($(this).val() == 'pickadate') ? true : false;
    $('.datetime div').toggle(t);
  });
});

这应该做同样的事情

$(function() {
  $('.datetime div').hide();

  $('.datetime [type=radio]').on('change', function() {
    $('.datetime div').toggle( $('.datetime [type=radio]:checked').val() == 'pickadate');

  });
});

只要没有默认移动浏览器卡住的任何挂起。

如果浏览器仍然不能正常运行，您也可以将逻辑更改为类似的内容。

$(function() {
  $('.datetime div').hide();

  $('.datetime [type=radio]').on('change', function(e) {
    toggleElement($(this).val());
  });
});

function toggleElement(el) {
  switch(el) {
    case 'pickadate':
        $('.datetime div').toggle(true);
        break;
    default:
        $('.datetime div').toggle(false);
        break;
  }
}