获取 Jquery 模板中按钮的值

Question

好的，我正在循环一个 JSON 数据集并使用 Jquery 模板填充一个 div。对于每个循环，我创建一个带有值的按钮。

现在，我使用以下方法将点击事件连接到循环内的一个函数：

<button id="btnAddGoodGuy" class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick=" addGoodGuy(event); " value="${MatchedString}"><i class="fa fa-user-md"></i></button>

我的问题，是函数 addGoodGuy 中按钮的值始终是第一个值。因此，在我的循环中，如果三个按钮的值分别为 a 值 b 和 c 值，无论我点击了哪个按钮，我总是会得到 a 值。

到目前为止，我的 addGoodGuy 函数如下所示：

    function addGoodGuy(event) {
           event.preventDefault();
           $('[data-toggle="tooltip"]').tooltip();
           var matchedItem = $('#btnAddGoodGuy').val();
           alert("The value is " + matchedItem);
     }

如何获取函数中的各个按钮值？

Answer 1

您不能对不同的按钮使用相同的id="btnAddGoodGuy"。试试这个方法：

<button class="btn btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" onclick=" addGoodGuy(event, this); " value="${MatchedString}"><i class="fa fa-user-md"></i></button>

和功能

function addGoodGuy(event, element) {
       event.preventDefault();
       $('[data-toggle="tooltip"]').tooltip();
       var matchedItem = element.value;
       alert("The value is " + matchedItem);
 }

Answer 2

首先你需要让你的ids 是唯一的（否则它是无效的 html）

那么你应该避免使用事件属性（内联脚本）并通过jQuery绑定处理程序。

<button id="btnAddGoodGuy" class="btn  btn-success btn-xs" type="button" data-toggle="tooltip" data-original-title="Good guy?" value="${MatchedString}"><i class="fa fa-user-md"></i></button>

并将处理程序绑定到容器div（您正在填充的那个）

$('containerDivId').on('click', 'button.btn', function(e){
    e.preventDefault();
    var value = this.value;
    alert("The value is " + value);
});