jquery - 如何知道在 jquery 的列表视图中按下了哪个按钮（“编辑”，删除）？

Question

我正在使用 jquery mobile 。我只是想知道在列表视图中按下了哪个按钮。我必须在 Edit 、 delete 、 row click 上执行三个不同的任务。我需要这样做不会相互干扰？

这是我的小提琴 http://jsfiddle.net/ravi1989/MneT6/1/

for (var i = 0; i < 30; i++) {




       $('#folderData').append(
            '<li class="caseRowClick" id="' + i + '" data-rel="popup" data-position-to="window">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>' + i  + '</h2>' + '<p>' + i+ '</p>' + '<p>' + i + '</p>' +'<span class="ui-li-count">' + i + '</span>'+  '</a>' +
            '<span class="ctrl togg"><fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" ><button class="edit button_design">Edit</button><button class="del button_design">Delete</button></fieldset><span>' + '</li>'
        );
           $('#folderData').listview('refresh');
           }

Answer 1

您可以根据它们的类为按钮分配委托的事件处理程序。快速示例，您的编辑按钮有一个类edit，因此您可以创建一个事件处理程序，例如：

$("#folderData").on("click", ".edit", function() {
    alert("Edit was pressed on row: " + $(this).closest("li").attr("id"));
});  

更新了你的小提琴：http: //jsfiddle.net/MneT6/5/

虽然这只是编辑按钮，但它也应该让您在正确的路径上使用其他按钮。

Answer 2

只需像这样附加点击事件

$('#folderData button.edit').on('click',function(e){ 
   e.stopPropagation();
   alert('edit has been clicked in row ' + $(this).closest('li.caseRowClick').attr('id')););
});

$('#folderData button.del').on('click',function(e) { 
   e.stopPropagation();
   alert('delete has been clicked in row ' + $(this).closest('li.caseRowClick').attr('id')); 
});

$('#folderData li.caseRowClick').on('click',function(e) { 
   e.stopPropagation();
   alert('row has been clicked with ID ' + $(this).attr('id')); 
});