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

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