jQuery按钮处理程序与内联onClick

Question

问题是:我在页面上有一个项目列表，每个项目都有自己的链接/按钮来删除它。目前，我在每个按钮上都有一个onclick，因为每个按钮需要将id和项目的描述/名称传递给JS函数。

我想让它不那么突兀，但想不出办法。有什么建议吗?

下面是当前设置的一个示例:

function doButtonThings(id, desc) {
    //jQuery to do some stuff and then remove the item from the page
}

和页面:

<!-- standard html page stuff -->
<ul>
    <li><button onclick="doButtonThings(1001, 'The thing we delete');"></button> Some thing that can be deleted #1</li>
    <!-- imagine many more list items this way with different ids and descriptions -->
</ul>
<!-- standard end of html page stuff -->

Answer 1

您可以将数据存储在HTML数据属性中:

<button data-myId="1001" data-myDescr="The thing we delete">Click me</button>

然后在jQuery的点击处理程序中使用它们:

$('button').click(function() {
    var $this = $(this),
        id = $this.data('myid'),
        descr = $this.data('mydescr');
    doButtonThings(id , descr );
});

这里有一个小提琴来说明:http://jsfiddle.net/didierg/fhLde/