jQuery单击时将所有图标添加到列表分隔符

Question

我有一个使用jquery的phonegap应用，它围绕listview构建，并使用一些自定义js根据用户输入打开和关闭特定的列表分隔符。

对于所有仅具有文本的列表分隔符，它可以完成我想要的一切，但是当我需要包含图像时，它就会出错。首次打开时，它看起来不错，但是一旦单击以扩展分隔线-从那以后，它将在图像上方以白色显示一行我认为是jquery的图标（X，>，<，向上箭头，向下-箭头，刻度线，齿轮，刷新符号）。

当我在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');
  });
});

仅文本就没有问题。只有当图像在那里。

有什么想法吗？

编辑：每次显示图像时都会出现问题，而不仅仅是在显示文字时出现

Answer 1

我仍然找到了解决方法，尽管我仍然不确定问题出在哪里。

我最初采用并改编的代码使用了很多.removeClass（'ui-icon-plus'）和.addClass（'ui-icon-minus'）来触发列表分隔符及其子元素的更改。我将它们更改为一对不引用图标的唯一类名。它解决了这个问题。不知道为什么。但却做到了！