jQuery Мобильный виджет просмотра списка при событии нажатия, не запускаемом для Mobile - PullRequest
Новая
       38

jQuery Мобильный виджет просмотра списка при событии нажатия, не запускаемом для Mobile

0 голосов
/ 05 февраля 2020

Я пытаюсь привязать событие click элемента списка, который прекрасно работает в браузере, но когда я запускаю его на Android Эмулятор (веб-просмотр) как приложение с cordova, я ничего не получаю и не получаю консольного вывода. Я повторил проблему с JSBin (ссылка ниже), он прекрасно работает в браузере, но не в эмуляторе android stud ios, который в основном представляет собой веб-просмотр.

HTML

<ul id="maclist" data-role="listview" data-inset="true">
    <li>
       <a id="23234234">
       <img src="../_assets/img/album-bb.jpg">
       <h2>Broken Bells</h2>
       <p>Broken Bells</p>
       </a>
    </li>
    <li>
       <a id="97893636">
       <img src="../_assets/img/album-hc.jpg">
       <h2>Warning</h2>
       <p>Hot Chip</p>
       </a>
    </li>
    <li>
       <a id="14235454">
       <img src="../_assets/img/album-p.jpg">
       <h2>Wolfgang Amadeus Phoenix</h2>
       <p>Phoenix</p>
       </a>
    </li>
</ul>

jQuery

$('#maclist').on('click', 'li a', function(event) {
    var id = $(this).attr("id");
    alert(id);

    // Fetch data from API using id
});

Мне просто нужно получить идентификатор текущего элемента, чтобы я мог сделать запрос на выборку данных из моего API. У меня есть другие события нажатия, которые отлично работают в приложении, данные в моем списке просмотра генерируются динамически, если это имеет значение, это всего лишь пример с использованием JSBin. Так почему же мое событие "при нажатии" не отвечает в веб-просмотре на мобильных устройствах, но работает в браузерах настольных компьютеров?

https://jsbin.com/xoyuveloje/edit?html, js, вывод

1 Ответ

2 голосов
/ 05 февраля 2020

Попробуйте это: 

$(document).on('vclick', '#maclist a', function(e) {
    var id = $(this).attr('id');
    alert(id);
});

Обработчик событий vclick jQuery Mobile имитирует обработчик событий onclick на мобильных устройствах.

vclick ссылка: https://api.jquerymobile.com/vclick/

Что касается динамически генерируемых элементов списка, см. здесь разницу между прямым и делегированным обработчиками событий:

Обработчики событий связаны только с выбранными в данный момент элементами; они должны существовать в тот момент, когда ваш код вызывает .on ()

Преимущество делегированных обработчиков событий заключается в том, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позднее.

...