我在 jquery mobile 中的列表视图有问题。我想使用 JSON 从服务器加载一些数据,并用项目填充列表视图。效果很好。但是,当我尝试对新加载的项目的点击做出反应时,我确实得到了该事件!我想我必须以某种方式刷新视图,有点不知道如何。
我在 http://jsfiddle.net/VqULm/227/
上画了一个小草图当您点击“单击我”按钮时,不再跟踪项目上的单击事件。我如何获得新商品的“Wokrs”提醒?
非常感谢您的阅读!
尝试
$('#listview').on('click', 'li', function() {
alert("Works"); // id of clicked li by directly accessing DOMElement property
});
与
jQuery > 1.7
或
$('#listview li').live('click', function() {
alert("Works"); // id of clicked li by directly accessing DOMElement property
});
使用 jQuery 版本 1.6.4。
因为。您在页面重新加载后在
li
中添加 listview
,因此这些 li
的任何事件都应该是 live
(对于您使用的 jQuery 版本)或 delegate
(jQuery > 1.7)。
如果您的 JQM 版本较旧(例如我的 - jqm 1.2.0), 并且上述两种方法都不适合您
试试这个:
<ul data-role="listview" id="myList">
<li id="1" >text</li>
</ul>
//on the js code use delegate
$('#myList').delegate('li', 'click', function () {
alert($(this).attr('id'));
});
到远程数据源和liswiew
用 div 包裹 ul 元素
<div data-role="page" id="myPage">
<form id="myform" class="ui-filterable">
<input id="what" data-type="search" placeholder="i.e.Carpentry...">
<div id="w_what">
<ul id="ul_what" data-role="listview" data-inset="true" data-filter="true" data input="#what">
</ul>
</div>
</form>
</div>
$( "#ul_what" ).on( "filterablebeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" ); // initially null
$('#w_what').show(); // For next search
if ( value && value.length > 0 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "/php/getWhat.php", // Ajax url
dataType: "json", // json
data: {
q: $input.val() // which value to be searched
}
})
.then( function ( response ) {
$.each( response, function ( id, val ) {
html += "<li>" + val.text + "</li>"; // json response has text element
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
$('#ul_what').delegate('li', 'click', function () {
var ul = $(this); // when clicked
$('#what').val(ul.text()); // set the value for input
$('#w_what').hide(); // hide the div
});
希望对某人有帮助
编写一个 JQuery Mobile 脚本,单击按钮1即可触发该脚本。该脚本读取文本框1中的书面文本并 将文本添加为名为 listview1 的列表视图中的新列表项。