Question

我正在制作登录和注册表格，通过ajax调用发送数据。服务器端由flask组成，错误以json格式返回。然后，在ajax成功函数中，添加带有错误信息的<li>元素并关闭（×）按钮，然后向下滑动ul。像这样：

 if ('email' in response) {
               $('#email-error').append('<li class="w3-display-container w3-red w3-round">' + response['email'] + '<span class="w3-button w3-circle w3-display-right">&times;</span></li>');
               $('#email-error').slideDown(250);
           }

工作正常。问题是，我无法关闭这些通知。由于有多个通知并且它们是动态添加的，所以我有一个回调函数来检测按钮是否被按下：

$(document).on('click', '.w3-button.w3-circle.w3-display-right', function () {
    $(this).parent.hide();
});

这种工作-检测到按钮单击，$(this)返回右键（$(this).hide()使按钮消失）。但是我需要隐藏<ul>（或至少<li>）元素。我尝试引用它们的父元素，但是$(this).parent返回未定义的（这就是console.log所说的）。另外，查看页面源代码时不会显示错误通知。我如何进入这些列表并关闭它们？

Answer 1

$（this）.parent是错误的。使用parent（）方法

$("button").on("click", function() {
  $('ul').append('<li class="w3-display-container w3-red w3-round">response <span class="w3-button w3-circle w3-display-right">&times;</span></li>');
});

$(document).on('click', '.w3-button.w3-circle.w3-display-right', function() {
  $(this).parent().hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>add</button>
<ul></ul>

jQuery无法访问动态创建的元素的父级-父级未定义

1 个答案: