Javascript 如何将同一Jquery函数应用于多个按钮

我正在尝试使用Ajax从数据库中获取数据。我想做的是在每个数据行之后添加一个delete按钮，这样如果我想删除一个特定的行，我只需单击它前面的delete按钮。我该怎么做？我目前正在尝试使用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>

A.
B
$（文档）.ready（函数（）{
函数删除（d）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
});
返回false；
};
});

我该怎么做？？这是否可以仅使用Jquery直接完成

修改代码：

A.
B
$（文档）.ready（函数（）{
函数deleteFromDB（d）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
});
返回false；
};
$（“输入[value='Delete']）。live（'单击'，函数（））{
var data=$（this）.parents（“tr:first”）.find（“td:first”）.text（）；//A B
deleteFromDB（数据）；
});
});

注意：不要将delete用作函数名，因为它是JavaScript修改代码中的关键字：

A.
B
$（文档）.ready（函数（）{
函数deleteFromDB（d）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
});
返回false；
};
$（“输入[value='Delete']）。live（'单击'，函数（））{
var data=$（this）.parents（“tr:first”）.find（“td:first”）.text（）；//A B
deleteFromDB（数据）；
});
});

---

注意：不要将delete用作函数名，因为它是JavaScript中的关键字

<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();
     });
     });

A.
B
$（文档）.ready（函数（）{
函数删除（d）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
});
返回false；
};
$（“.btn”）.live（'click'，function（）{
$（this.parents（“tr:first”）.remove（）；
});
});

尝试使用类名

<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();
     });
     });

A.
B
$（文档）.ready（函数（）{
函数删除（d）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
});
返回false；
};
$（“.btn”）.live（'click'，function（）{
$（this.parents（“tr:first”）.remove（）；
});
});

试试这个。这会解决你的问题

试试这个。这将解决您的问题

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>

html

---

我更喜欢这样：

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

A.
B
$（文档）.ready（函数（）{
函数删除（d，onDelete）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
onDelete.call（）；
});
返回false；
};
$（“输入[value='Delete']）。live（'单击'，函数（））{
var that=$（this.parents（“tr:first”）；
删除（$（this）.data（“id”），函数（）{
//在数据库上删除后。。。
删除（）；
});
});
});

我更喜欢这种方式：

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

A.
B
$（文档）.ready（函数（）{
函数删除（d，onDelete）{
变量deletedata='delete='+d；
$.post（'searchadd.php'，deletedata，函数（数据）{
**AJAX代码**
onDelete.call（）；
});
返回false；
};
$（“输入[value='Delete']）。live（'单击'，函数（））{
var that=$（this.parents（“tr:first”）；
删除（$（this）.data（“id”），函数（）{
//在数据库上删除后。。。
删除（）；
});
});
});

首选方法是使用数据属性来存储id。从jQuery 1.7开始，on（）优先于.live（）和.delegate（）

A.
B
$（文档）.ready（函数（）
{
$（'：button'）。在（'click'，函数（）
{
var id=$（this.data（'id'）；
删除行（id）；
});
函数deleteRow（d）
{
变量deleteData='delete='+d；
$.post（'searchadd.php'，deleteData，函数（数据）
{
**AJAX代码**
});
返回false；
}
});

首选方法是使用数据属性来存储id。从jQuery 1.7开始，on（）优先于.live（）和.delegate（）

A.
B
$（文档）.ready（函数（）
{
$（'：button'）。在（'click'，函数（）
{
var id=$（this.data（'id'）；
删除行（id）；
});
函数deleteRow（d）
{
变量deleteData='delete='+d；
$.post（'searchadd.php'，deleteData，函数（数据）
{
**AJAX代码**
});
返回false；
}
});

我不确定是否理解您的问题。你在抱怨你的代码不起作用吗？不。我不知道如何使用一个代码来应用于表中的所有行，因此当我单击特定的删除按钮时，会调用该函数转到数据库并从数据库本身删除该行。我知道如何运行AJAX来删除它，但我不知道如何为我单击的delete按钮调用delete函数我不确定我是否理解您的问题。你在抱怨你的代码不起作用吗？不。我不知道如何使用一个代码来应用于表中的所有行，因此当我单击特定的删除按钮时，会调用该函数转到数据库并从数据库本身删除该行。我知道如何运行AJAX来删除它，但是我不知道如何调用delete按钮的delete函数我想运行delete函数

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