Home » Javascript » jQuery .click() event not working as expected with mobile browsers. How do I fix it?

jQuery .click() event not working as expected with mobile browsers. How do I fix it?

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am currently working on a project (ASP.NET MVC) where I need a user’s choice from a dropdown menu to hide/show divs on selection. The following code is working great in desktop browsers. I, however, am running into a bug on Android and iOS browsers.

In order for my code to work properly on mobile browsers, I need to select and then re-select an option from this dropdown menu. In other words, when I first select an option from the dropdown menu, none of the expected divs are hiding/showing. When I go back into the dropdown and re-select the same option, the divs then hide/show. I want my code to work on one selection.

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 (this was a suggested fix here on SO, although it doesn’t seem to have any effect)

html {
    cursor:pointer;
}

I have tried changing the .click() to .select() and to .change().

.select(): the code continued to work correctly on desktop browsers but the dropdown menu lost all functionality in the mobile browsers

.change(): I was unable to select a different option from the menu and trigger the divs hiding/showing. The app was stuck on the user’s first choice. I really need this functionality.

I have yet to try anything with jQuery Mobile. I have never used it before, so I wouldn’t even know where to begin to start troubleshooting.

I was working on the following addition to my jQuery code, but I realize that I need to replace that .click() event with something else. If all I need to do is just find a replacement for the .click() event, I suppose this code wouldn’t be necessary:

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');
        }
     });
 }

This is the only bug I am running into with my jQuery code on mobile browsers. I’m struggling to even understand what’s going on, so this has been such a pain to troubleshoot. If someone could explain to me what’s going on and show me how to get around this bug, I would really appreciate it.

Answers:

Without seeing the rest of your code, I can’t give you an exact answer, but it should look more like this:

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

Here’s a working sample using the code:

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