And so, the problem is:
There is a mobile site. On it jq. There are two buttons that are in different positions in the DOM. something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <ul class="table-view"> <li class="promt"> <a class="icon icon-right-nav" style="font-size: 14px;">Подсказка</a> </li> </ul> <div class="content-padded"> <a id="answer">Решение</a> </div> <script> $(document).ready(function(){ $(document).on('click', 'li', function(){ alert($(this).attr('class')); }); $(document).on("click", "#answer", function(){ alert($(this).attr('class')); }); }); </script> </div>

So, it works in the browser from the desktop, but not from the phone. BUT! The handler for the #answer button works like a clock! Only .promt does not work. How to be?

    2 answers 2

     $(function(){ $(document).on('click', 'li a', function(){ alert($(this).parent().attr("class")); }); $(document).on("click", "#answer", function(){ alert($(this).attr("class")); }); });
    • No, all data is loaded by AJAX, so I need exactly the delegated events. - igolka97
    • Ok, but the essence of the answer is in the "li a" selector. - pavelip
    • still does not work. The answer found on the English-speaking Stackoverflow. The magic was that safari does not want to accept such events, or wants, but only when connected to the body. The solution is to connect onclick="" to the element on which the handler is hung. "Strange, but it works," as the forumchanin said. Right now, I will issue the same in the form of an answer. - igolka97
    • Have you tried my version? If it worked for #answer, it should work for another a - pavelip tag July pm
    • Of course I tried. That does not work and that's all ( - igolka97 10:10

    The answer found on the English-speaking Stackoverflow. The magic was that safari does not want to accept such events, or wants, but only when connected to the body. The solution is to connect onclick="" to the element on which the handler is hung. "Strange, but it works," as the forumchanin said. As a result, the final code looks like this:

     <div class="content"> <ul class="table-view"> <li onclick="" class="promt"> <a class="icon icon-right-nav" style="font-size: 14px;">Подсказка</a> </li> </ul> <div class="content-padded"> <a onclick="" id="answer">Решение</a> </div> <script> $(document).ready(function(){ $(document).on('click', 'li', function(){ alert($(this).attr('class')); }); $(document).on("click", "#answer", function(){ alert($(this).attr('class')); }); }); </script> </div>