Question

我想更改HTML + JS模板的行为，但是我不想重新做已经完成的事情。假设我们具有元素的层次结构，并且看起来内部元素正在['Account Number', 'Account Name', 'Total DKK', 'Account Number', 'Account Name', 'Total DKK', 'Account Number', 'Account Name', 'Total DKK']事件上调用函数。但是当我在Chrome检查器控制台上选择它并检查它是否包含onclick时，它会返回onclick，我认为它是以更一般的方式开发的，或者可能是在其他属性上开发的？

我要找到的功能是将其包装在我的程序中，并在执行其他操作后调用它。

层次结构如下：

null

每推入<ul> <li data-id="1234"> <div> <a href="#">the button</a> </div> </li> ... </ul>时，button就会通过ajax发送到服务器。

Answer 1

我希望它能起作用

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
   $(document).ready(function(){
    $(".data").click(function(){
    var data = this.parentNode.parentNode.getAttribute("data-id");
    $.ajax({
    url:"url",
    data:{'data':data},
    type:"post",
    success:function((){
      });
     })
   });
});
</script>
</head>
<body>

 <li data-id="1234"> <div> <a  class="data" onclick = abc(event)>the button</a> </div>


</body>
</html>

Answer 2

我在es6上玩了一点，并达到了预期的结果：https://codepen.io/omgitsevan/pen/yxrVVM

但是基本上，代码如下：

JavaScript

document.addEventListener('click', (evt) => {
  function getDataAttr(node, attrValue) {
    if (!node.getAttribute(attrValue)) {
      return getDataAttr(node.parentNode, attrValue)
    }

    console.log(node.getAttribute(attrValue))
  }

  getDataAttr(evt.target, 'data-id');
})

HTML

<ul>
  <li data-id="1234">
    <div> <a href="#">the button</a> </div>
  </li> ... </ul>

查找为元素或父元素设置的onClick事件

2 个答案: