2

I want to change a HTML+JS template behavior but i don't want to re do things which are already done. assume we have a hierarchy of elements and looks like the inner one is calling a function on it's onclick event. but when i select it on the chrome inspector console and check if it has anything for the onclick it returns null i think it's developed in a more general way or possibly on other property?

What i want is to find that function wrap it in mine and call it after doing something else.

The hierarchy is like below:

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

whenever the button is pushed the data-id is sent to the server via ajax.

Mahesh G
  • 1,226
  • 4
  • 30
  • 57
no0ob
  • 335
  • 4
  • 18

2 Answers2

0

I hope it will work 

<!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>
shubham singh
  • 400
  • 2
  • 7
  • No not this, i want to find how does the Ajax is called. Cause it has other things not just the `data-id`. but i don't know where does that function applied? to any parent node? or a global thing? is it onclick or another property like on button pressed or .... – no0ob Sep 22 '18 at 17:41
  • this won't help since he doesn't know where is triggering the onClick event, so he might use chrome dev tools and trigger any click event – Evandro Cavalcate Santos Sep 22 '18 at 18:00
0

I played a little bit with es6 and did the expected result: https://codepen.io/omgitsevan/pen/yxrVVM

but basically, the code is the following:

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>
Evandro Cavalcate Santos
  • 365
  • 3
  • 13