Question

当我尝试在listview <li>项目上触发事件时，似乎不考虑整个元素，而只考虑其中的元素：

<ul data-role='listview' data-filter='true' data-filter-placeholder='Search Your Trucks..' data-inset='true' data-mini='true'>
    <li id=tg_1><a id=tg_2 href=#divdet>ONE</a> TEST </li>
    <li id=tg_2><a id=tg_2 href=#divdet>TWO</a> FOO </li>
</ul>

处理touchstart的函数（处理多个元素的touchstart）：

document.addEventListener('touchstart', function (e) {
    switch(e.target.id) {
        case ...
            ..other elements...
            break;
        default:
            if(e.target.id.substr(0,3) == "tg_")
                $.ajax({
                     ... do request ....
                })
               $("#divdet").html(from_ajax_data);
            }
    }
}

问题在于它正常工作，但仅在点击<li>元素的特定部分时才有效。每次点击<li>时，我都希望它能够正常工作。

概念是使用href我可以使用幻灯片等效果移动到应用的下一页，而触摸事件我将数据加载到div中。

Answer 1

您也可以使用脚本转移到下一页：

http://api.jquerymobile.com/pagecontainer/#method-change

<ul data-role='listview' data-filter='true' data-filter-placeholder='Search Your Trucks..' data-inset='true' data-mini='true'>
    <li id="tg_1"><a id="tg_1a" href="#">ONE</a> TEST </li>
    <li id="tg_2"><a id="tg_2a" href="#">TWO</a> FOO </li>
</ul>

$(document).on("click", "li", function(e){        
    var id = $(this).prop("id");
    if(id && id.substr(0,3) == "tg_") {
        var from_ajax_data = "from ajax html"; //ajax call here
        $("#divdet").html(from_ajax_data);
        $( ":mobile-pagecontainer" ).pagecontainer( "change", "#divdet", { transition: "slide" } );
     }    
});

正在使用 DEMO

jquery mobile listview - 要在<li>元素

1 个答案: