クリックしたすべてのボタンでjqueryを使用してデータ属性を取得する方法

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>がクリックされたときにデータIDをつかむためにjqueryのを使用しようとしています。これは私のコードです：

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

ログに記録できる最初の行のみです。私は構文を知らない。私は何をすべきか？

@ UPDATED @

は私ではなく、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

あなたは、単一のWebページに同じid複数回を持つことはできません。代わりにclassを使用してください。

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

<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>

Answer 2

は試してみてください。だから私は、この使用あなたが$("button").on("click")

2を使用してクリックイベントを追加することができます）

1）IDを取得内側のクリックイベント$(this).data("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>

Answer 3

あなたのコード内で二回ユニークことになっている "ID" を、使用しています。 jQueryは、idsが一意であると仮定しているため、最初のものと一致します。

Answer 4

まず、同じ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 5

あなただけの任意のXHTMLまたはHTMLドキュメント

<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> 

**その後も、クラス属性にクリックバインド**

で一度ID名を使用することができます

data-idの値を取得するためのデータ関数を使用

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

またはデータIDの値

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