Trigger Click On One Anchor When Another Is Clicked

When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle. HTML:

).on('click', function() { $("#foo").trigger('click'); }); $('#foo').on('click', function() { $(this).css("color", "red"); });

$('.next').on('click', function() {
  $("#foo").trigger('click');
});
$('#foo').on('click', function() {
  $(this).css("color", "red");
});

nava {
  position: absolute;
  top: 50%;
  display: block;
  outline: none;
  text-align: left;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
nava.prev {
  left: 0;
}
nava.next {
  right: 0;
}
nava svg {
  display: block;
  margin: 0 auto;
  padding: 0;
}
/*--------------------*//* Fillpath (http://www.nizuka.fr/)*//*--------------------*/.color-10 {
  background: #f3cf3f;
}
.nav-fillpatha {
  width: 100px;
  height: 100px;
}
.nav-fillpath.icon-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.nav-fillpatha::before,
.nav-fillpatha::after,
.nav-fillpath.icon-wrap::before,
.nav-fillpath.icon-wrap::after {
  position: absolute;
  left: 50%;
  width: 3px;
  height: 50%;
  background: #566475;
  content: '';
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nav-fillpath.icon-wrap::before,
.nav-fillpath.icon-wrap::after {
  z-index: 100;
  height: 0;
  background: #fff;
  -webkit-transition: height 0.3s, -webkit-transform 0.3s;
  transition: height 0.3s, transform 0.3s;
}
.nav-fillpatha::before,
.nav-fillpath.icon-wrap::before {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-135deg);
  transform: translateX(-50%) rotate(-135deg);
  -webkit-transform-origin: 50%0%;
  transform-origin: 50%0%;
}
.nav-fillpatha.next::before,
.nav-fillpatha.next.icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(135deg);
  transform: translateX(-50%) rotate(135deg);
  -webkit-transform-origin: 50%0%;
  transform-origin: 50%0%;
}
.nav-fillpatha::after,
.nav-fillpath.icon-wrap::after {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  -webkit-transform-origin: 00;
  transform-origin: 00;
}
.nav-fillpatha.next::after,
.nav-fillpatha.next.icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform-origin: 100%0%;
  transform-origin: 100%0%;
}
.nav-fillpathh3 {
  position: absolute;
  top: 50%;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.85em;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpatha.prevh3 {
  left: 100%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.nav-fillpatha.nexth3 {
  right: 100%;
  text-align: right;
  -webkit-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
}
.nav-fillpatha:hover.icon-wrap::before,
.nav-fillpatha:hover.icon-wrap::after {
  height: 50%;
}
.nav-fillpatha:hover::before,
.nav-fillpatha:hover.icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(-125deg);
  transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpatha.next:hover::before,
.nav-fillpatha.next:hover.icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(125deg);
  transform: translateX(-50%) rotate(125deg);
}
.nav-fillpatha:hover::after,
.nav-fillpatha:hover.icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(-55deg);
  transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpatha.next:hover::after,
.nav-fillpatha.next:hover.icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(55deg);
  transform: translateX(-50%) rotate(55deg);
}
.nav-fillpatha:hoverh3 {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
}
@media screen and (max-width: 520px) {
  .nav-slidea.prev,
  .nav-reveala.prev,
  .nav-doubleflipa.prev,
  .nav-fillslidea.prev,
  .nav-growpopa.prev {
    -webkit-transform-origin: 0%50%;
    transform-origin: 0%50%;
  }
  .nav-slidea.next,
  .nav-reveala.next,
  .nav-doubleflipa.next,
  .nav-fillslidea.next,
  .nav-growpopa.next {
    -webkit-transform-origin: 100%50%;
    transform-origin: 100%50%;
  }
  .nav-slidea,
  .nav-reveala,
  .nav-doubleflipa,
  .nav-fillslidea {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  .nav-growpopa {
    -webkit-transform: translateY(-50%) scale(0.6);
    transform: translateY(-50%) scale(0.6);
  }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><sectionclass="space_between"><h3class="center_rounded_ol">Man-to-man suggestions</h3><olclass="rounded-list center_rounded_ol"><li><ahref=""id="foo">Name Surname</a></li></ol></section><navclass="nav-fillpath"><aclass="next"><spanclass="icon-wrap"></span><h3><strong>Alexis</strong> Tsipras</h3></a></nav>

---

Update: using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..

This post jQuery.click() vs onClick has more detailed answer.

Solution 2:

There is a typo in load() function:

functionload() {
  $("#foo").trigger('click'); //'r' was missing
}

Please note that

$(this)

inside burn() function returns window instance, is that what you are expecting there?

In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):

<a href="javascript:"id="foo" onclick="burn(this)">Name Surname</a>

and js:

functionburn(element) {
  $(element).css("color", "red");
}

This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.