【问题标题】:jQuery getting selected item of dynamic listviewjQuery获取动态列表视图的选定项
【发布时间】:2013-06-09 10:14:37
【问题描述】:

我正在使用 XML 数据生成带有 listViews 的动态可折叠集。它生成正确,但我需要一个点击/触摸事件来显示一些数据,然后再转到另一个页面。这是我的代码:

$("#dvAccordion").empty();
var outdiv = $('<div data-role="collapsible-set"></div>');
$(strXML).find('Category').each(function(){
    var colldiv = $('<div data-role="collapsible" data-collapsed="true"></div>');
    colldiv.append('<h3>' + $(this).find('Category_Name').text() + '</h3>');    
    var uldiv = $('<ul  data-role="listview" data-inset="false"></ul>');
    colldiv.append(uldiv);
    //
    $(this).find('Menu_Item').each(function(){
        var sItemName = $(this).find('item_name').text() ;
        uldiv.append('<li data-name="baby"><a href="menu.html" rel="external">' + sItemName + '</a></li>');                         
    });
    //
    //$('#dvAccordion').listview('refresh');
    //
    outdiv.append(colldiv);
    outdiv.appendTo('#dvAccordion');
});
//$('#dvAccordion [data-role=collapsible-set]').collapsibleset();
//$('#dvAccordion').collapsibleset();
//$('#dvAccordion').collapsibleset('refresh');

$('#dvAccordion').trigger('create');

我在页面加载时添加一个事件监听器,如下所示:

$('#dvAccordion ul').children('li').bind('vclick', function(e) {
alert('Selected Name=' + $(this).attr('data-name'));
});

此绑定代码适用于静态可折叠 HTML 集时可以正常工作。它会在移动到“menu.html”之前显示警报。但是对于我的动态集,它会在没有任何警报的情况下移动到“menu.html”。请帮忙。

【问题讨论】:

  • 你能用你创建的动态列表创建一个 jsfiddle 吗?
  • @yeyene 我会这么做的。
  • 这里是 jsFiddle - jsfiddle.net/yesprasoon/MvcHm。静态项返回 id,但动态项不返回。
  • 在答案部分查看我的答案。

标签: listview jquery-mobile dynamic selecteditem


【解决方案1】:

先调用函数generateDynamicAccordion();

这里有演示http://jsfiddle.net/yeyene/MvcHm/9/

JQUERY

    generateDynamicAccordion();    
    $('#dvDynamic_selectId ul').children('li').bind('vclick', function(e) {
        var sId = $(this).attr('data-id');
        alert('Selected id=' + sId);
    }); 
    //
    $('#dvStatic_selectId ul').children('li').bind('vclick', function(e) {
        var sId = $(this).attr('data-id');
        alert('Selected id=' + sId);
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-08-04
    • 1970-01-01
    • 2018-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多