why the dynamically created element's events can not catch more then once?

Question

I have an HTML page which is generated by draw.io. I have made a tree which has expandable and collapsible feature. My Ultimate goal is to make the tree expandable as if it opens level by level inspite of expanding all the level at a time. But I can not catch the click event more than once.

Here is the Html page in the snippet. If you press plus image of the root it expands all the levels.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>

<head>
  <title>orgchart</title>
  <meta charset="utf-8" />
</head>

<body>
  <div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile modified=\&quot;2019-08-02T15:12:49.062Z\&quot; host=\&quot;www.draw.io\&quot; agent=\&quot;Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36\&quot; etag=\&quot;xWvZypefXJHEohbldhZx\&quot; version=\&quot;11.1.1\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;pCMyVlHLk1MruJxpiqRY\&quot; name=\&quot;Page-1\&quot;&gt;7Vpdb5swFP01eYyE+e7jlrTrtE2a1m7T9uaCGyw5ODJOCPn1uwQb6rhpM7VNINtLgg/+POceG64YeZP5+oPAi+wLTwkbuU66HnnTkevGYQy/NVA1APJjv0FmgqYK64AbuiEKdBS6pCkpjIqScybpwgQTnuckkQaGheClWe2eM3PUBZ4RC7hJMLPRnzSVmVpX4HT4NaGzTI+MHHVnjnVlBRQZTnn5APIuR95EcC6bq/l6QlhNnualaXe15247MUFyeUiDbLr69S5PPlV47N5ep9XHze/vYxR6TT8rzJZqyT+IkBQYAPRWEAJ/n3HFl1ItQ1aam6Kkc4ZzKL3P5JwBiOCykFhIJSRMCe5xQTc8l1jXSDLKUtWnN5Uwhi48qLsd2pvWHQhS0A2+Y7qc1BVoTsRttSCqB4DvKWMTzrgAKOfbaam1wYLIei9tqBUDopjwOZGigiqqgesp/VQEj5HWvuziAfkKyx7Ggg4FrGJw1nbeyQQXSqm/Us23VPtWB9KuQmVGJblZ4KQul+BQU6qauCtwBM1nCtlLWMIZw4uC7I++p+JrP7smuf4j1DqPUOu/HbOBxeykDleA0BvSu6IFvdPdOq9FLgoNdpF3enpDi16LVZLCDqyKhN3x8rID3m8BuLHSm5TBuODLPN3GqNOyXXf3alzDRPlSJOQQc8I+OCNP9xk8rp8gDEu6Mqf9BmJEe2PdVqXnsR7qQOpRrMf/Y3032E4W65G9r/dCjOeJi8KDxQheaqaDxVBNv3IKA7UmHPv+heHCcbTjrmYRqtmOpu08XiKzfb4M9/g2n43a8ul2tMg+MIZiong4JgqQaSL32B6yz63hemjnEbgPJroYqolinckYgIm86LQm0lydg4l8ZD5b98BEMbLoHYqJ9ESfN1F0ahOhwND96E9zmqtzeEENgv6ZyM79DsVE/mBMhFzTREc/iOxU8WA9FF70z0ODzSvEB+cV9AvBv+uhM8oqIN98I/LQ6T002LRCfHBaoXceQujYJjqntEJ8PBNBsftIoFGj+9TCu/wD&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}"></div>
  <script type="text/javascript" src="https://www.draw.io/js/viewer.min.js"></script>
</body>

</html>

As far as I tried to catch the click event. But it works only once. I want to catch all the event when the image clicked

<script>
$("image").on('click',function () {
    console.log(this);
})
</script>

Moreover I tried the solution . But still it does not work.

<script>
    $(document).on('click','image',function () {
        console.log(this);
    })
</script>

Try changing your binding to `$(document.body).on('click', 'image', function(){ console.log(this) });` — Taplar, Aug 02 '19 at 17:33
That is very confusing then, as the suggestion I gave was using a delegate event handler, which should work so long as the element that was clicked is an `` tag, regardless of if it is added later to the page body. — Taplar, Aug 02 '19 at 17:44
I get some click event using `$("*").click(function(event) { console.log(event.target); });` but still it can not catch all the click event — tuhin47, Aug 02 '19 at 17:48
`$('*')` is selecting all elements. That's very heavy handed. Rather you should know which elements you are wanting to handle the click event for and target them specifically. So in the case of your runnable snippet above, which elements are you wanting to handle the click for? — Taplar, Aug 02 '19 at 17:49
actually, you can see in the snippet I want to handle the + and - image — tuhin47, Aug 02 '19 at 17:51
Yeah, not sure what to do with this case. Direct binding seems to work once, and delegates do not work at all, which suggests to me that the script is stopping click events from bubbling out of the svg or something. Which if they do that, and the exanding and collapsing is creating/destroying elements, then the direct bindings are being wiped out. — Taplar, Aug 02 '19 at 18:04
but in debugging mode `document.getElementsByTagName('image')` provides me all the images correctly which exist at that moment — tuhin47, Aug 02 '19 at 18:08
it will appear dynamically. You can watch the `+` and `-` sign image from inspecting element — tuhin47, Aug 07 '19 at 06:33
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — cloned, Aug 07 '19 at 06:52
that's why you have to read the whole answer and see how to add event binding to dynamically created elements. Otherwise it will only work once. — cloned, Aug 07 '19 at 07:00

why the dynamically created element's events can not catch more then once?

0 Answers0