javascript - 複数のボタンに同じJquery関数を適用する方法

Question

Ajax を使用してデータベースからデータを取得しようとしています。私がやりたいことは、すべてのデータ行の後に削除ボタンを追加することです。そのため、特定の行を削除したい場合は、その前にある削除ボタンをクリックするだけです。それ、どうやったら出来るの？私は現在、Jqueryとjavascriptの両方を使用しようとしています..

<table>
<tr><td> A </td> <td> <input type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr>
<tr><td> B </td> <td> <input type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
function delete(d) {
    var deletedata = 'delete=' + d;
    $.post('searchadd.php', deletedata, function(data) {
          **AJAX CODE**

    });
    return false;
 };

 });
 </script>

どうすればいいですか?? これはJqueryだけで直接行うことができますか??

Answer 1

推奨される方法は、データ属性を使用して ID を格納することです。jQuery 1.7 では、.on() が .live() および .delegate() よりも優先されます。

<table>
        <tr><td> A </td> <td> <input data-id='1' type = 'button' value = 'Delete'></td></tr>
        <tr><td> B </td> <td> <input data-id='2' type = 'button' value = 'Delete'></td></tr>
    </table>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $(':button').on('click', function ()
            {
                var id = $(this).data('id');
                deleteRow(id);
            });

            function deleteRow(d)
            {
                var deleteData = 'delete=' + d;
                $.post('searchadd.php', deleteData, function (data)
                {
                    ** AJAX CODE **
                });
                return false;
            }
        });
    </script>

Answer 2

変更されたコード: jsfiddle

<table>
    <tr><td> A </td> <td> <input type = 'button'  value = 'Delete'></td></tr>
    <tr><td> B </td> <td> <input type = 'button' value = 'Delete'></td></tr>
    </table>

    <script type="text/javascript">
    $(document).ready(function() {
    function deleteFromDB(d) {
        var deletedata = 'delete=' + d;
        $.post('searchadd.php', deletedata, function(data) {
              **AJAX CODE**

        });
        return false;
     };
     $("input[value='Delete']").live('click',function(){
      var data = $(this).parents("tr:first").find("td:first").text();// A B
      deleteFromDB(data );
     });
     });
     </script>

注: delete は JavaScript のキーワードであるため、関数名として使用しないでください。

Answer 3

html

<table>
<tr><td> A </td> <td> <input class="del-button" type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr>
<tr><td> B </td> <td> <input class="del-button" type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr>
</table>

JavaScript

$(".del-button").on("click", function(e){
    // code for deletion
});

Answer 4

私はこの方法を好むでしょう：

<table>
<tr><td class="data-desc"> A </td> <td class="data-delete"> <input data-id="A" type='button'  value='Delete'></td></tr>
    <tr><td class="data-desc"> B </td> <td class="data-delete"> <input type='button' data-id="B" value = 'Delete'></td></tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
function delete(d, onDelete) {
    var deletedata = 'delete=' + d;
    $.post('searchadd.php', deletedata, function(data) {
          **AJAX CODE**
          onDelete.call();

    });
    return false;
 };
 $("input[value='Delete']").live('click',function(){
   var that = $(this).parents("tr:first");
   delete($(this).data("id"), function () {
      // after is deleted on db...
      that.remove();
   });
 });
 });
 </script>

Answer 5

クラス名で試してください

<table>
    <tr><td> A </td> <td> <input type = 'button' class= 'btn' value = 'Delete'></td></tr>
    <tr><td> B </td> <td> <input type = 'button'  class= 'btn' value = 'Delete'></td></tr>
    </table>

 $(document).ready(function() {
    function delete(d) {
        var deletedata = 'delete=' + d;
        $.post('searchadd.php', deletedata, function(data) {
              **AJAX CODE**

        });
        return false;
     };
     $(".btn").live('click',function(){
       $(this).parents("tr:first").remove();
     });
     });

Answer 6

このフィドルを試してください。これで問題が解決するはずです