Trigger anchor click on div click

I have div elements and if a div is clicked, I want to trigger a click event on the inner<a></a> tag. I need to do this, as there are validation functions on the click function of the anchor tags and they are not rendered by me.

This is my approach to do it:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 $(e.currentTarget).find('.link').trigger('click');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?

maximum call stack size exceeded

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

1

btw, it's anchor, anker is a german word only. ;-)

– cloned
Nov 16 '18 at 8:04

You are getting this error cause the click that you programmatically trigger on the anchor element, is also picked up by the div element (that's how click events work). Can you call the validation function in another way than by clicking the element?

– thomaux
Nov 16 '18 at 8:14

1

@cloned not only German, it's also a Dutch word :)

– thomaux
Nov 16 '18 at 8:15

1

You learn something new every day. Thanks @thomaux

– cloned
Nov 16 '18 at 8:33

add a comment |

This is my approach to do it:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 $(e.currentTarget).find('.link').trigger('click');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?

maximum call stack size exceeded

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

1

btw, it's anchor, anker is a german word only. ;-)

– cloned
Nov 16 '18 at 8:04

You are getting this error cause the click that you programmatically trigger on the anchor element, is also picked up by the div element (that's how click events work). Can you call the validation function in another way than by clicking the element?

– thomaux
Nov 16 '18 at 8:14

1

@cloned not only German, it's also a Dutch word :)

– thomaux
Nov 16 '18 at 8:15

1

You learn something new every day. Thanks @thomaux

– cloned
Nov 16 '18 at 8:33

add a comment |

This is my approach to do it:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 $(e.currentTarget).find('.link').trigger('click');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?

maximum call stack size exceeded

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

This is my approach to do it:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 $(e.currentTarget).find('.link').trigger('click');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?

maximum call stack size exceeded

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 $(e.currentTarget).find('.link').trigger('click');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 $(e.currentTarget).find('.link').trigger('click');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

javascript jquery html

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

edited Nov 16 '18 at 8:06

thomaux

13.9k76487

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

asked Nov 16 '18 at 7:55

Gutelaunetyp

16310

1

btw, it's anchor, anker is a german word only. ;-)

– cloned
Nov 16 '18 at 8:04

You are getting this error cause the click that you programmatically trigger on the anchor element, is also picked up by the div element (that's how click events work). Can you call the validation function in another way than by clicking the element?

– thomaux
Nov 16 '18 at 8:14

1

@cloned not only German, it's also a Dutch word :)

– thomaux
Nov 16 '18 at 8:15

1

You learn something new every day. Thanks @thomaux

– cloned
Nov 16 '18 at 8:33

add a comment |

1

btw, it's anchor, anker is a german word only. ;-)

– cloned
Nov 16 '18 at 8:04

You are getting this error cause the click that you programmatically trigger on the anchor element, is also picked up by the div element (that's how click events work). Can you call the validation function in another way than by clicking the element?

– thomaux
Nov 16 '18 at 8:14

1

@cloned not only German, it's also a Dutch word :)

– thomaux
Nov 16 '18 at 8:15

1

You learn something new every day. Thanks @thomaux

– cloned
Nov 16 '18 at 8:33

btw, it's anchor, anker is a german word only. ;-)

– cloned
Nov 16 '18 at 8:04

You are getting this error cause the click that you programmatically trigger on the anchor element, is also picked up by the div element (that's how click events work). Can you call the validation function in another way than by clicking the element?

– thomaux
Nov 16 '18 at 8:14

@cloned not only German, it's also a Dutch word :)

– thomaux
Nov 16 '18 at 8:15

You learn something new every day. Thanks @thomaux

– cloned
Nov 16 '18 at 8:33

add a comment |

2 Answers
2

active

oldest

votes

Try to add e.preventDefault(); after e.stopPropagation();

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

answered Nov 16 '18 at 8:01

eXcalibur

745

add a comment |

stopPropagation() only prevent to trigger parent element click, Just do it with div click:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

edited Nov 16 '18 at 9:48

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53333591%2ftrigger-anchor-click-on-div-click%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Try to add e.preventDefault(); after e.stopPropagation();

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

answered Nov 16 '18 at 8:01

eXcalibur

745

add a comment |

Try to add e.preventDefault(); after e.stopPropagation();

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

answered Nov 16 '18 at 8:01

eXcalibur

745

add a comment |

Try to add e.preventDefault(); after e.stopPropagation();

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

answered Nov 16 '18 at 8:01

eXcalibur

745

Try to add e.preventDefault(); after e.stopPropagation();

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

answered Nov 16 '18 at 8:01

eXcalibur

745

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

edited Nov 16 '18 at 8:10

Bonish Koirala

4568

answered Nov 16 '18 at 8:01

eXcalibur

745

answered Nov 16 '18 at 8:01

eXcalibur

745

answered Nov 16 '18 at 8:01

eXcalibur

745

add a comment |

stopPropagation() only prevent to trigger parent element click, Just do it with div click:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

edited Nov 16 '18 at 9:48

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

add a comment |

stopPropagation() only prevent to trigger parent element click, Just do it with div click:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

edited Nov 16 '18 at 9:48

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

add a comment |

stopPropagation() only prevent to trigger parent element click, Just do it with div click:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

edited Nov 16 '18 at 9:48

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

stopPropagation() only prevent to trigger parent element click, Just do it with div click:

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

$('.wrapperDiv').on('click', function(e) 
 e.stopPropagation();
 var link = $(e.currentTarget).find('.link')
 var win = window.open(link.attr('href'), link.attr('target'));
 win.focus();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://google.com/" target="_self">Test A</a>
 </div>

 </li>
 <li>
 <div class="wrapperDiv">
 <a class="link" href="https://bing.com/" target="_blank">Test B</a>
 </div>
 </li>
</ul>

edited Nov 16 '18 at 9:48

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

edited Nov 16 '18 at 9:48

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

answered Nov 16 '18 at 8:25

Govind Samrow

5,239103258

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth