Jquery mobile 如何在Jquery Mobile中创建包含可单击列表项的按钮的listview

有没有办法在Jquery Mobile中创建一个列表视图，该列表视图具有可单击的列表项，并且每个项都有3个按钮？我不想使用拆分按钮列表视图。我试图创建这个，但按钮点击不起作用。单击任何按钮的行为类似于单击列表项。

您可以添加

e.stopImmediatePropagation（）（）添加到按钮单击，以便它们不会传播到父listitem

更新：

评论中提到，listitems是动态生成的。原始代码仍然有效，因为按钮使用了事件委派（）。以下是一个更新的示例：

标记中的空UL

<ul data-role="listview" id="thelist">
</ul>




在pagecreate上，填充listview并添加单击处理程序

$(document).on("pagecreate", "#page1", function(){

    //make list dynamically
    var allItems = '';
    for (var i=0; i< 4; i++){
         allItems += '<li data-rowid="' + i + '"><a href="#"><div data-role="controlgroup" data-type="horizontal"><input type="button" value="Hmm" /><input type="button" value="No" /><input type="button" value="Yes" /></div>&nbsp;Item ' + i + ' text or description</a></li>';   
    }
    $("#thelist").empty().append(allItems).listview("refresh").enhanceWithin();


    $("#thelist").on("click", "li input", function(e){
        e.stopImmediatePropagation();        
        var rowid = $(this).parents("li").data("rowid");
        var btnText = $(this).val();
        alert("You clicked the button: " + btnText + " on row number: " + rowid);
    });

    $("#thelist").on("click", "li a", function(e){
        alert("You clicked the listitem");
    });

});

$（document）.on（“pagecreate”，“page1”，function（）{
//动态生成列表
变量allItems=''；
对于（变量i=0；i<4；i++）{
allItems+='
；
}
$（“#列表”）.empty（）.append（allItems）.listview（“刷新”）.enhanceWithin（）；
$（“#列表”）。在（“单击”，“输入”，函数（e）{
e、 停止即时复制（）；
var rowid=$（this）.parents（“li”）.data（“rowid”）；
var btnText=$（this.val（）；
警报（“您单击了行号：+rowid上的按钮：+btnText+”）；
});
$（“#列表”）。在（“单击”，“li a”，函数（e）上{
警报（“您单击了列表项”）；
});
});

更新

原件：






$（document）.on（“pagecreate”，“#page1”，function（））{
$（“#列表li”）。在（“单击”，“输入”，函数（e）{
e、 停止即时复制（）；
var rowid=$（this）.parents（“li”）.data（“rowid”）；
var btnText=$（this.val（）；
警报（“您单击了行号：+rowid上的按钮：+btnText+”）；
});
$（“#列表li”）。在（“单击”，“a”，函数（e）{
警报（“您单击了列表项”）；
});
});

您还可以将按钮放在listitem锚定标记的外部，并使用CSS将所有内容很好地定位…
您使用的是哪个jQM版本？谢谢。在本例中，这很好。但在我的例子中，列表行是动态生成的。在这种情况下，列表项单击和按钮单击都不会触发。有什么想法吗？@Adnan，我已经更新了我的fiddle来动态创建listitems：因为我的事件处理程序使用了事件委派，所以它们仍然可以正常工作。如果您的UL也是动态创建的，您需要将处理程序放在文档上，然后委托给按钮/listitem。@Adnan，我已经更新了我的答案并处理了动态listitems。谢谢。我明白了。顺便说一句，只有先填充列表，然后绑定单击事件，这才有效。我更改了您的示例代码，首先绑定单击事件，然后填充列表，单击停止工作。
<ul data-role="listview" id="thelist">
    <li data-rowid="1">
        <a href="#">            
            <div data-role="controlgroup" data-type="horizontal">
                <input type="button" value="Hmm" />
                <input type="button" value="No" />
                <input type="button" value="Yes" />
            </div>
            Item 1 text or description
        </a>
    </li>
</ul>

$(document).on("pagecreate", "#page1", function(){

    $("#thelist li").on("click", "input", function(e){
        e.stopImmediatePropagation();        
        var rowid = $(this).parents("li").data("rowid");
        var btnText = $(this).val();
        alert("You clicked the button: " + btnText + " on row number: " + rowid);
    });

    $("#thelist li").on("click", "a", function(e){
        alert("You clicked the listitem");
    });

});