如何创建与jQuery Mobile的

Question

点击列表中的项目内的按钮列表视图有什么方法来创建jQuery Mobile的列表视图具有可点击列表项和每个项目都有3个按钮？我不想使用拆分按钮listview。我试图创建这个，但按钮点击不起作用。点击任何按钮的行为就像点击列表项一样。

Answer 1

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

更新：在listItems中是动态生成的评论提到

OP。原始代码仍然有效，因为按钮使用了事件代表（https://learn.jquery.com/events/event-delegation/）。下面是一个更新的例子：

空UL标记中

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

在pagecreate，填写列表视图，并添加单击处理

$(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

ORIGINAL：

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

}); 

你也可以把按钮列表项锚标记之外并使用CSS来定位的一切好听......