javascript - 将动态数据添加到 UL jquery mobile 时出现问题

Question

我有这个ul

  <ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d">
    <li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li>
    <li><a>10.00</a><a class="deleteMe"></a></li>                        
  </ul>

我正在尝试向其中动态添加数据。但由于我不明白的原因，它不采用类deleteme。

这就是我试图填充它的方式:

 $('#OkTarget').bind("click tap", function () {        
     $('#contributionList').append('<li id="lii1"><a>5.00</a><a id="aid1" class="deleteMe"></a></li>').listview('refresh');                       
 });

这就是点击时应该完成的事情:

$('.deleteMe').bind("click tap", function () {
    $(this).parent().remove();
    $('#contributionList').listview('refresh');
}); 

Answer 1

您需要委托(delegate)动态添加的元素。尝试一下

$(document).on('click tap', '.deleteMe', function () {
    $(this).parent().remove();
    $('#contributionList').listview('refresh');
}); 

而不是

$('.deleteMe').bind("click tap", function () {
    $(this).parent().remove();
    $('#contributionList').listview('refresh');
}); 

bind 在执行时将事件仅附加到具有该选择器的现有元素