Error loading Bootstrap on iPhone

Question

I am creating a webpage with a hidden div that crashes when I click on another div. The problem is that the div will not crash when I use the iPhone (computers and other devices work fine). I even tried Safari on my laptop and it worked correctly.

The content of the page was originally inserted into the page with jQuery, and it worked. However, I wanted it to load on another page, so now the content is loaded with the rest of the page after I click the link.

When I used the developer tools for iOS, I noticed that there was no error caused by clicking on the link, in fact, no event was triggered. When I used jQuery to explicitly switch the collapse, it really worked.

In the Google Chrome app for iOS, this did not work either.

When I just copied the inserted bootstrap collapse from w3schools to my webpage, their crash worked, but mine didn’t. So I am adding some of the source code, maybe I missed something:

<div class="result_header" data-toggle="collapse" data-target="#source_1_collapse">
    <h2 class="result_h2">Results for "a": </h2>
</div>
<div id="source_1_collapse" class="collapse result_container">
    <table class="table _table-striped _table-hover" id="source_1_table">
    .
    .
    </table>
</div>

Thanks for any help.

Answer 1

Well, the answer was there, and I did not see it ...

After a long study, I found this article that explains that the problem was in binding the event to an invisible element.

Obviously, the Safari iPhone will not allow other input elements or links to fire a click event.

, "onlick", , .

:

<div onclick="none()" class="result_header" data-toggle="collapse" data-target="source_1_collapse" >
   <h2 class="result_h2">Results for "{{name}}": </h2>
</div>
<div id="source_1_collapse" class="collapse result_container">
    .
    .
</div>

<script>
    function none(){}
</script>

.

, , .