向 UL jquery 移动设备添加动态数据时出现问题

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>

我正在尝试向其中动态添加数据。但是由于我不明白的原因，它没有使用 class 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

您需要对动态添加的元素进行委托。尝试

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

而不是

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

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