The jQuery event does not work properly in mobile (iOS, Android)

advertisements

jQuery event doesn't have any an issue at all in browser.

However, when in mobile browsers (iOS and Android), unless I click button 1, it doesn't properly recognizes the jQuery event. How can I fix it up for working properly jQuery click event in mobile like in browser?

$(function(){

      $(".btn2").css({"display":"none"});

      $("body").click(function(){
                    if($("#menuSelect option:selected").index() > 0){
                        $(".btn1").css({"display":"none"});
                        $(".btn2").css({"display":"block"});
                    }
            })
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <section class="section">
                    <select id="menuSelect">
                        <option value="menu" selected="selected">choose one </option>
                        <option value="a">a</option>
                        <option value="b">b</option>
                        <option value="c">c</option>
                        <option value="d">d</option>
                    </select>
    </section>

    <div>
          <p class="btn1 button"><input type="button"     value="button1" onclick="fn_popup_open('area_popup2');"/></p>
                <p class="btn2"><input type="button" value="button2" id="Apply"/></p>

Try it:

var myElement= document.getElementById('myelement');

myElement.addEventListener('click', function() {

alert('Hello world');

}, false);