Question

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

现在，我使用以下方法将click事件连接到循环中的函数：

<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中的按钮值始终是第一个值。因此，在我的循环中，如果有三个按钮，其值分别为值b和值c，则i总是以值a结束，无论我点击哪个按钮。

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

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

如何获取我的功能中的各个按钮值？

Answer 1

首先，您需要让id成为唯一（，否则它是无效的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);
});

Answer 2

您不能对不同的按钮使用相同的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);
 }

获取Jquery模板中按钮的值

2 个答案: