javascript: function of a div in another div having another function

Question

I have a nested div. The child div is inside the parent div. How can I distinguish the correct onClick function?

In this case, only the function of parent div is called no matter clicking where I click on the nested div.

<div class="portfo" onclick="showValue()">
    <div id="cross" onclick="deleteValue()">
         <img src='cross.png' height='15px' width='15px' alt='some'>
    </div>
</div>

However, showValue is always called whenever I click on the children div.

What is the problem? That `deleteValue` is not called or that `showValue` is always called? — Felix Kling, Apr 19 '13 at 09:24

score 0 · Answer 1 · answered Apr 19 '13 at 09:24

0

delete is a reserved word. Try renaming that function to something else. Then both events should fire when click on the image. First the delete event and then the showval one

answered Apr 19 '13 at 09:24

Yeronimo

1,731
15
28

score 0 · Answer 2 · answered Apr 19 '13 at 09:24

0

I think a library like jQuery can help you out here. Take a look at the .on() method.

answered Apr 19 '13 at 09:24

Bas Slagter

9,831
7
47
78

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

I think your problem has to do with Event Propogation. This should help you solve it: Prevent event propogation

Also, delete() is a predefined function in JavaScript, you should rename it to something else, unless you're trying to use the built-in function, in that case, please look at the proper usage: delete

edited May 23 '17 at 10:25

Community

1
1

answered Apr 19 '13 at 09:26

Vimal Stan

2,007
1
12
14

javascript: function of a div in another div having another function

3 Answers3