jQuery .click（）事件无法在移动浏览器中正常工作。 我如何解决它？

Question

我目前正在开发一个项目（ASP.NET MVC），在该项目中，我需要用户从下拉菜单中进行选择，以隐藏/显示选定的div。 以下代码在桌面浏览器中运行良好。 但是，我在Android和iOS浏览器上遇到了一个错误。

为了使我的代码在移动浏览器上正常工作，我需要从此下拉菜单中选择一个选项，然后重新选择一个选项。 换句话说，当我第一次从下拉菜单中选择一个选项时，没有预期的div隐藏/显示。 当我回到下拉菜单并重新选择相同的选项时，divs然后隐藏/显示。 我希望我的代码可以处理一个选择。

的HTML

<div class="col-md-12 required" id="petChoiceType">
      @Html.LabelFor(model => model.PetChoice, new { @class = "control-label" })
      @Html.DropDownListFor(m => m.PetChoice, petType.Select(d => new SelectListItem { Value = d.Key, Text = d.Value }).ToList(), "-- Please Select --  ", new { @class = "form-control", required = "required", id = "petOptions" })
      @Html.ValidationMessageFor(model => model.PetChoice, "Please select", new { @class = "text-danger" })
</div>

jQuery的

$('#petChoiceType').click(function () {
    if ($('#petOptions').val() === "Dog") {
        $('.individualInformationSection').toggle();
    }

    if ($('#petOptions').val() === "Cat") {
        $('#coBuyerInfo').toggle();
        $('#coBuyerSignatureSection').toggle();
    }

    if ($('#petOptions').val() === "Bird") {
        $('#coBuyerInfo').toggle();
        $('#coBuyerSignatureSection').toggle();
        $('#buyerSignatureTitleSection').toggle();
        $('#SSN').removeAttr('required');
        $('#buyerInfoSection').toggleClass('required');       
    }

    else {
        $('#SSN').attr('required');
    }
});

CSS（这是对SO的建议修复，尽管它似乎没有任何作用）

html {
    cursor:pointer;
}

我尝试将.select()更改为.select()和.change() 。

.select() ：代码继续在桌面浏览器上正常工作，但是下拉菜单丢失了移动浏览器中的所有功能

.change() ：我无法从菜单中选择其他选项并触发div的隐藏/显示。 该应用程序停留在用户的第一选择上。 我真的需要这个功能。

我还没有尝试使用jQuery Mobile进行任何操作。 我以前从未使用过它，所以我什至不知道从哪里开始进行故障排除。

我正在对jQuery代码进行以下补充，但是我意识到我需要用其他东西替换该.click()事件。 如果我需要做的只是寻找.click()事件的替代品，那么我想这段代码就没有必要了：

jQuery的

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $('#petChoiceType').click(function () {
        if ($('#petOptions').val() === "Dog") {
            $('.individualInformationSection').toggle();
        }

        if ($('#petOptions').val() === "Cat") {
            $('#coBuyerInfo').toggle();
            $('#coBuyerSignatureSection').toggle();
        }

        if ($('#petOptions').val() === "Bird") {
            $('#coBuyerInfo').toggle();
            $('#coBuyerSignatureSection').toggle();
            $('#buyerSignatureTitleSection').toggle();
            $('#SSN').removeAttr('required');
            $('#buyerInfoSection').toggleClass('required');       
        }

        else {
            $('#SSN').attr('required');
        }
     });
 }

这是我在移动浏览器上使用jQuery代码遇到的唯一错误。 我甚至都在努力了解正在发生的事情，因此很难进行故障排除。 如果有人可以向我解释发生了什么并告诉我如何解决此错误，我将非常感激。

Answer 1

没有看到其余的代码，我无法给您确切的答案，但是它看起来应该更像这样：

 $('#petOptions').change(function () { var petVal = $(this).val(); // This will show you the value that's being returned by your select element console.log(petVal); if (petVal === "Dog") { $('.individualInformationSection').toggle(); } else if (petVal === "Cat") { $('#coBuyerInfo').toggle(); $('#coBuyerSignatureSection').toggle(); } else if (petVal === "Bird") { $('#coBuyerInfo').toggle(); $('#coBuyerSignatureSection').toggle(); $('#buyerSignatureTitleSection').toggle(); $('#SSN').removeAttr('required'); $('#buyerInfoSection').toggleClass('required'); } else { $('#SSN').attr('required'); } }); 

这是使用代码的工作示例：

 $('#petOptions').change(function () { var petVal = $(this).val(); // This will show you the value that's being returned by your select element console.log(petVal); if (petVal === "Dog") { alert('You chose dog'); } else if (petVal === "Cat") { alert('You chose cat'); } else if (petVal === "Bird") { alert('You chose bird'); } else { alert('You chose nothing'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="petOptions"> <option disabled selected>--Choose an animal--</option> <option value="Dog">Dog</option> <option value="Cat">Cat</option> <option value="Bird">Bird</option> <option>Nothing</option> </select>