Question

我正在显示一个HTML表格，并希望在最后一列中包含一个按钮，当单击该按钮时，执行AJAX调用，这将导致从表中删除表格行。我是jQuery和AJAX的新手并且在我去的时候解决问题 - 我已经设法设置了一些在编辑字段时运行的AJAX调用，但现在我很难将一个连接到表格行中的按钮。

以下是该表的外观：

<tr class="" id="tableRow1"><td><a href="projectDetails.php?action=viewProject&id=DA0993D3-F559-4ADB-BD3A-33EA6A812FE9">Store 1</a></td><td>lorem ipsum</td><td>John Smith</td><td>20/11/2014 12:53:52 AM</td><td><button type="button" id="closeNote" class="btn btn-primary">Acknowledge</button></td></tr>
 <tr class="" id="tableRow2"><td><a href="projectDetails.php?action=viewProject&id=BA10F0A9-1778-4606-90D3-318E75070B2C">Store 2</a></td><td>lorem ipsum</td><td>Sally Jones</td><td>20/11/2014 12:53:52 AM</td><td><button type="button" id="closeNote" class="btn btn-primary">Acknowledge</button></td></tr>
 <tr class="" id="tableRow3"><td><a href="projectDetails.php?action=viewProject&id=058EC9C0-E913-44A8-8BD6-8AB9B8EA3CDF">Store 3</a></td><td>lorem ipsum </td><td>Bill Howden</td><td>12/11/2014 01:43:03 PM</td><td><button type="button" id="closeNote" class="btn btn-primary">Acknowledge</button></td></tr>

我知道按钮的ID不是唯一的 - 此时脚本仅在单击第一行中的按钮时触发。我不确定如何为脚本可以看到的每个按钮分配唯一的ID。

这是我的剧本：

 <script type="text/javascript">
 $(document).ready(function() {
    $("#closeNote").click(function(){
        $.post('editNote.php', { type: 'hideNote', id: '1E1DDA14-D2C6-4FC8-BA5F-DBCCC7ABAF7F' }, function(data) {
            data = JSON.parse(data);
            if (data.error) {
                $("#ajaxAlert").addClass("alert alert-danger").html(data.text);
                $("#ajaxAlert").show();
                return; // stop executing this function any further
            } else { 
                $("#ajaxAlert").hide();
                $(this).closest('tr').remove();
            }

        }).fail(function (xhr) {
            // no data available in this context
            $("#ajaxAlert").addClass("alert alert-danger");
            //display AJAX error details
            $("#ajaxAlert").html(xhr.responseText);
            $("#ajaxAlert").show();
        });
     }); 
});
</script>

我只需要一些帮助即可完全实现这一点，以便在任何行上单击按钮时它会调用脚本，反过来，如果它调用的PHP脚本成功，则会删除单击按钮的行

Answer 1

不是将按钮应用于ID，而是为每个链接提供一个类：

<button class="btn btn-primary close-note"

然后按如下方式修改你的JS：

$("button.close-note").click(function(){

在回调函数中，关键字this不再引用该元素，而是引用XHR对象。

要解决此问题，请将$（this）分配给$.post

之外的变量

var $self = $(this);
$.post( ... ... function(response){
    // code and stuff
    $self.closest('tr').hide();
});

您还需要确保浏览器不会跟随链接;再次修改click行：

.click(function(e){
    e.preventDefault();

jQuery AJAX按钮单击 - 在AJAX调用成功后删除表行

1 个答案: