jquery 移动列表视图 - 在 <li> 元素上触发的 touchstart 事件

Question

当我尝试在列表视图 <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" } );
     }    
});

Working DEMO

jquery 移动列表视图 - 在 <li> 元素上触发的 touchstart 事件

jquery mobile listview - touchstart event to fire on <li> element

javascript

android

jquery-mobile