列表视图上的 jquery 移动点击（）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10884378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery mobile click() on listview
提问by A.S.
I have a problem with the listview in jquery mobile. I want to load some data from a server using JSON and fill thy listview with the items. That works fine. But when I am trying to react on a click on a new loaded item I do net get the event! I think I have to refresh the view somehow, bit do not know how.
我在 jquery mobile 中的列表视图有问题。我想使用 JSON 从服务器加载一些数据，并用这些项目填充你的列表视图。这很好用。但是当我试图对一个新加载的项目做出反应时，我确实得到了这个事件！我想我必须以某种方式刷新视图，有点不知道如何。
I made a little sketch on http://jsfiddle.net/VqULm/227/
我在http://jsfiddle.net/VqULm/227/上做了一个小草图
when u hit the click me button the click event on a item isn't tracked anymore. How do i get the "Wokrs" alert on the new items?
当您点击“点击我”按钮时，不再跟踪项目上的点击事件。我如何获得有关新项目的“Wokrs”警报？
Thank u very much for reading!
非常感谢您的阅读！
回答by thecodeparadox
Try
尝试
$('#listview').on('click', 'li', function() {
alert("Works"); // id of clicked li by directly accessing DOMElement property
});
with jQuery > 1.7
和 jQuery > 1.7
OR
或者
$('#listview li').live('click', function() {
alert("Works"); // id of clicked li by directly accessing DOMElement property
});
with your jQuery version 1.6.4.
使用您的 jQuery 版本 1.6.4。
why you need this
为什么你需要这个
Because. you're adding liwithin listviewafter page reload, so any event for those lis should live(for jQuery version you used) or delegate(jQuery > 1.7).
因为。您要添加li内listview页重装后，那么对于那些无论如何liS的关系live（jQuery的版本，你使用）或delegate（jQuery的> 1.7）。
回答by ZoharAdar
If your JQM version is old (like mine- jqm 1.2.0), and both mentioned methods are not working for you
如果您的 JQM 版本较旧（例如我的 jqm 1.2.0），并且上述两种方法都不适合您
Try this:
尝试这个：
<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'));
});
回答by Kadir Erturk
To remote data source and liswiew
到远程数据源和liswiew
wrap the ul element with a div
用 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
});
Hope helps to somenone
希望对某人有所帮助
