jQuery触发“ a”标签的点击事件

Question

i am trying to trigger a click event for anchor tag inside 'li'. when click on 'li', i want to trigger a tag inside that 'li'. my html and jQuery given below. below jquery showing this error.

"too much recursion .."

<li><a href="link">link text</a></li>


$(document).ready(function(){
 $("#menu-top li").click(function(){
  $(this).children('a').click();
 });
});

please help me. thanks

Answer 1

use the trigger event!

<li><a href="link">link text</a></li>

$(document).ready(function(){
 $("#menu-top li").click(function(){
  $(this).children('a').trigger('click');
 });
});

Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method. A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user

jQuery Trigger Event

Answer 2

Use 'find' instead of 'children'

$(document).ready(function(){
 $("#menu-top li").click(function(){
  $(this).find('a').click();
 });
});

Answer 3

Call event.stopPropagation() to call click recursively as clicking the a will trigger the click for its parent li. This will again cause the click of anchor tag which results in recursive call.

Live Demo

  $(document).ready(function () {
      $("#menu-top li").click(function (event) {
          alert("li clicked");
          $(this).children('a').click();       
      });
      $("#menu-top li a").click(function (event) {
          //your code
          alert("a clicked");
          event.stopPropagation();         
      });
  });

Answer 4

Add this in your code:

$("#menu-top li a").click(function(e){
 e.stopPropagation();
});

This will prevent the click event to propagate from child element a to parent element li.