在jQuery mobile中绑定动态添加的元素 [英] Binding dynamically added elements in jQuery mobile

问题描述

这个想法是，您可以更新列表，然后在更新它之后，您可以点击删除它。

Html：

 < p为H.测试与LT; / p为H. 
< ul data-role =listview> 
< li>讴歌< / li> 
< li>奥迪< / li> 
< li>宝马< / li> 
< li>凯迪拉克< / li> 
< li>法拉利< / li> 
< / ul> 
< br> 
< input type =buttonvalue =Updateid =button> 
  

Javascript：

  var new_list = 
'< ul data-role =listview>'+ 
'< li class =delete> Dog< ; / li>'+ 
'< li class =delete> Cat< / li>'+ 
'< / ul>'; $（'＃'）。off（'click'）。on（'click'，function（）{
 $（'ul'）。remove（）; $ b （new_list）; 
 $（'ul'）。listview（）; 
}）; $ b $（'p'）。 $（'。delete'）。off（'click'）。on（'click'，function（）{
 $（this）.remove（）; 
 }）; 
  

Jsfiddle Link

解决方案

动态添加的项目如下。

  $（document）.on（event，.selector，function（） {
 $（this）.remove（）; 
 $（'ul_selector'）。listview（'refresh'）; 
}）; 
  

I'm trying to delete some list elements after dynamically adding them.

The idea is that you can update the list, and then after updating it you can click on a list item to delete it.

Html:

<p>Test</p>
<ul data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>
<br>
<input type="button" value="Update" id="button">

Javascript:

var new_list =
    '<ul data-role="listview">' +
    '<li class="delete">Dog</li>' +
    '<li class="delete">Cat</li>' +
    '</ul>';

$('#button').off('click').on('click', function () {
    $('ul').remove();
    $('p').after(new_list);
    $('ul').listview();
});

$('.delete').off('click').on('click', function () {
    $( this ).remove();
});

Jsfiddle Link

解决方案

The correct way to bind events to dynamically added items is as follows.

$(document).on("event", ".selector", function () {
  $(this).remove();
  $('ul_selector').listview('refresh');
});

这篇关于在jQuery mobile中绑定动态添加的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！