Question

我们有以下代码

HTML

<html>
<head>
<script type="text/javascript">
$(document).ready(function() {

    $('.details').on('click','.remove', function() {
        $.ajax({
            url : 'remove',
            type : 'GET',
            success : function(event) {
                  event.preventDefault();
                  $(this).closest("tr").remove();
            }
        });
    }

});
</script>
</head>
<html>
 <div class="details">
    <table>
     <thead>
      ...
     </thead>
     <tbody>
      <tr>
       <td><button class="remove" value="somevalue1">clickme!</button></td>
       <td><button class="remove" value="somevalue2">clickme!</button></td>
       <td><button class="remove" value="somevalue3">clickme!</button></td>
      </tr>
     </tbody>
    </table>
  </details>
</html>

不幸的是不起作用，如何删除按钮在哪里？（当然功能有用：例如：alert（））

更新：立即检查......

Answer 1

您的代码中存在不同的问题。

1，你的HTML无效。您需要将按钮包含在tr和td

中

2，没有类.details的元素。如果有这样的元素，它应该是表的父元素。然后只有事件委托才能起作用。

3，您可以使用.closest()代替callong parent()两次

你的HTML应该是这样的

<table>
    <thead>
        ...
    </thead>
    <tbody>
        <tr>
            <td>
                <button class="remove" value="somevalue1">clickme!</button>
            </td>
        </tr>
        <tr>
            <tr>
                <td>
                    <button class="remove" value="somevalue2">clickme!</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="remove" value="somevalue3">clickme!</button>
                </td>
            </tr>
    </tbody>
</table>

jquery将是

$(document).on("click", ".remove", function(e) {
    e.preventDefault();
    $(this).closest("tr").remove();

});

在上面的示例中，我使用document委派了click事件。您可以将其替换为dom ready中存在的任何其他父元素。

Demo

在editerd代码中，$(this)引用ajax，而不是单击的元素。所以你需要暂时保存它以便在成功处理程序中引用它。

$('.details').on('click', '.remove', function(event) {
   event.preventDefault();
    var obj = $(this)
    $.ajax({
        url: 'storageorder-inventory-remove',
        type: 'GET',
        success: function() {

            $(obj).closest("tr").remove();
        }
    });

});

jQuery on（）并删除父不工作

1 个答案: