Question

我对jquery很新，我想在我的应用程序中使用它。我有一个包含这样的数据的表：

<tbody>
 <tr>
  <td>Ariel <button id="edit" data-id="<?php echo $row->id_user; ?>Edit</button></td>
  <td>ariel@abc.com</td>
  <td>27</td>
 </tr>
 <tr>
  <td>Noel <button id="edit" data-id="<?php echo $row->id_user; ?>Edit</button></td>
  <td>noel@abc.com</td>
  <td>31</td>
 </tr>
 <tr>
  ...
 </tr>
</tbody>

我在点击<button>时尝试使用jquery来获取数据ID。这是我的代码：

$(function() {
  var btn = $("#edit"),
      id = btn.data("id");
  btn.on("click", function() {
    console.log(id);
  });
});

只能记录第一行。我不知道语法。我该怎么办？

@UPDATED @

我找到了一个使用class而不是id的解决方案。在某个元素中具有相同的id是无效的。所以我用这个：

<button class="edit" data-id="<?php echo $row->id_user; ?>">Edit</button>

在我的jquery中进行一些更改：

$(".edit").each(function() {
    var $this = $(this),
        id = $this.data("id");
    $this.on("click", function() {
      console.log(id);
    });
});

Answer 1

首先，我们不应该定义具有相同ID的多个HTML元素。您可以将ID更改为类，然后尝试此...

$(function() {
  $("button.edit").on("click", function() {
   var id = $(this).data("id");
    console.log(id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
 <tr>
  <td>Ariel <button class="edit" data-id="id-1">Edit</button></td>
  <td>ariel@abc.com</td>
  <td>27</td>
 </tr>
 <tr>
  <td>Noel <button class="edit" data-id="id-2">Edit</button></td>
  <td>noel@abc.com</td>
  <td>31</td>
 </tr>

</tbody>

Answer 2

您不能在一个网页中多次使用id次。请改用class。

＆＃13;

$(function() {
  var btn = $(".edit");
  
  btn.on("click", function() {
    var data = $(this).data("id");
    console.log(data);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
  <tr>
    <td>Ariel <button class="edit" data-id="id-1">Edit</button></td>
    <td>ariel@abc.com</td>
    <td>27</td>
  </tr>
  <tr>
    <td>Noel <button class="edit" data-id="id-2">Edit</button></td>
    <td>noel@abc.com</td>
    <td>31</td>
  </tr>
  <tr>
    ...
  </tr>
</tbody>

＆＃13;

Answer 3

您在代码中使用了“ id ”，这应该是唯一两次。 jQuery 与第一个匹配，因为它假设ID是唯一的。

Answer 4

您只能在任何XHTML或HTML文档中使用ID名称

<tbody>
    <tr>
        <td>Ariel <button class="edit" data-id="<?php echo $row->id_user; ?>">Edit</button></td>
        <td>ariel@abc.com</td>
        <td>27</td>
    </tr>
    <tr>
        <td>Noel <button class="edit" data-id="<?php echo $row->id_user; ?>">Edit</button></td>
        <td>noel@abc.com</td>
        <td>31</td>
    </tr>
    <tr>
        ...
    </tr>
</tbody>

**然后绑定点击甚至是类属性**

使用数据函数获取data-id的值

$(function() {
    $('.edit').click(function () {
       var id = $(this).data('id')
       console.log(id);
    });
});

或使用attr函数获取data-id的值

$(function() {
    $('.edit').click(function () {
       var id = $(this).attr('data-id')
       console.log(id);
    });
});

Answer 5

尝试：

1）您可以使用$("button").on("click")

添加点击事件

2）在点击事件

中使用$(this).data("id")获取ID

$(function() {
  $("button").on("click", function() {
   var id = $(this).data("id");
    console.log(id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
 <tr>
  <td>Ariel <button class="edit" data-id="id-1">Edit</button></td>
  <td>ariel@abc.com</td>
  <td>27</td>
 </tr>
 <tr>
  <td>Noel <button class="edit" data-id="id-2">Edit</button></td>
  <td>noel@abc.com</td>
  <td>31</td>
 </tr>

</tbody>

如何使用jquery在每个单击的按钮中获取数据属性

5 个答案: