jQuery：如何区分多个相同的按钮和传递参数？

Question

我尝试将此工作解决方案移至 jQuery。

<table>
    <tr th:each="l : ${lst}">
        <td>
            <input type="button" th:onclick="foo ([[${l}]])"/>
        </td>
    </tr>
</table>

....

function foo (x)
{
}

我怎样才能以 jQuery 的方式做到这一点？ 这样做是个好主意吗？

我试过了，但我不知道如何将参数 ${l} 放入 function 中，也不知道如何区分不同的按钮。

<table>
    <tr th:each="l : ${lst}">
        <td>
            <input type="button" id="mybutton"/>
        </td>
    </tr>
</table>

...

$("#mybutton").click (function ()
{
});

Answer 1

将您的 HTML 修复为如下所示：

<table>
  <tr th:each="l : ${lst}">
    <td>
      <input class="mybutton" type="button" value="${l}">
      <!-- Fix the above's ${l} to be the desired output value -->
    </td>
  </tr>
</table>

然后在 jQuery 中使用：

function foo () {
  // Do something 
  console.log(this.value); // whatever is returned by `${l}`
};

$("table").on("click", ".mybutton", foo);

如果除了${l}之外，按钮还需要一些其他文本，请使用 HTMLButtonElement：

<table>
  <tr th:each="l : ${lst}">
    <td>
      <button class="mybutton" type="button" value="${l}">Click me!</button>
      <!-- Fix the above's ${l} to be the desired output value -->
    </td>
  </tr>
</table>