如何在 Jquery Mobile 的可点击列表项中创建带有按钮的列表视图

Question

有什么方法可以在 Jquery Mobile 中创建一个列表视图，该列表视图具有可点击的列表项，并且每个项都有 3 个按钮？我不想使用拆分按钮列表视图。我试图创建它，但按钮点击不起作用。单击任何按钮的行为就像单击列表项一样。

Answer 1

您可以将e.stopImmediatePropagation(); (http://api.jquery.com/event.stopimmediatepropagation/) 添加到按钮点击中，这样它们就不会传播到父列表项。

更新：

在 cmets 中提到的 OP 列表项是动态生成的。原始代码仍然有效，因为按钮使用了事件委托 (https://learn.jquery.com/events/event-delegation/)。这是一个更新的示例：

标记中的空 UL

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

在页面创建时，填充列表视图并添加点击处理程序

$(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");
    });

});

更新DEMO

原文：

DEMO

<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");
    });

});

您还可以将按钮放在 listitem 锚标记之外，并使用 CSS 很好地定位所有内容...