У меня есть приложение phonegap, использующее jquery, оно построено на основе списка и использует некоторые пользовательские js для открытия и закрытия определенных разделителей списков на основе ввода пользователя.
Он делает все, что я хочу, со всеми разделителями списков, имеющими только текст, однако, когда мне нужно включить изображение, происходит ошибка. При первом открытии он выглядит хорошо, но как только вы нажмете, чтобы развернуть разделитель - и с этого момента, он добавляет строку, как я думаю, иконки jquery белым над изображением (X,>, <, стрелка вверх, вниз стрелка, галочка, зубчатое колесо, символ обновления). </p>
Когда я открываю приложение в Firefox, все нормально. но если я открою его в Firefox Develor Tools, эмулирующем телефон, проблема в этом. И это там, когда приложение на самом деле на телефоне.
Это HTML
<ul data-role="listview" class="library" data-icon="false" data-inset="true" data-divider-theme="c">
<li data-role="list-divider" data-link="coffee" class="fontbrush"><div> Custom Tokens<img src="img/sample image.jpg"> </div></li>
<li class="lazy hidden coffee"><a></a>
<p><img data-src="img/luxury card.jpg">
и это то, что я думаю, вероятно, соответствует JS
// hide and show on search
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
$(".lazy.show").each(function(idx){
var $img = $(this).find("img");
var src = $img.data("src");
$img.prop("src", src);
$(this).removeClass('lazy');
});
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
С одним текстом нет проблем. Это только когда изображение есть.
Есть идеи?
edit: проблема с отображением при каждом появлении изображения, а не только при наличии текста