Trigger click on one anchor when another is clicked

Question

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

HTML:

<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
    <ol class="rounded-list center_rounded_ol">
      <li>
        <a href="javascript:" id="foo" onClick="burn()">Name Surname</a>
      </li>

    </ol>
</section>

<nav class="nav-fillpath">
  <a class="next" onClick="load()">
    <span class="icon-wrap"></span>
    <h3><strong>Alexis</strong> Tsipras</h3>
  </a>      
</nav>

JavaScript:

function load() {
  $("#foo").tigger('click');
}
function burn() {
  $(this).css("color", "red");
}

Answer 1

I personally prefer writing it this way: JS Fiddle

$('.next').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");
});

nav a {
  position: absolute;
  top: 50%;
  display: block;
  outline: none;
  text-align: left;
  z-index: 1000;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
nav a.prev {
  left: 0;
}
nav a.next {
  right: 0;
}
nav a svg {
  display: block;
  margin: 0 auto;
  padding: 0;
}
/*--------------------*/

/* Fillpath (http://www.nizuka.fr/)*/

/*--------------------*/

.color-10 {
  background: #f3cf3f;
}
.nav-fillpath a {
  width: 100px;
  height: 100px;
}
.nav-fillpath .icon-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::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-fillpath a::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-fillpath a.next::before,
.nav-fillpath a.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-fillpath a::after,
.nav-fillpath .icon-wrap::after {
  top: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
  transform: translateX(-50%) rotate(-45deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.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-fillpath h3 {
  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-fillpath a.prev h3 {
  left: 100%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
  right: 100%;
  text-align: right;
  -webkit-transform: translateY(-50%) translateX(50%);
  transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
  height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(-125deg);
  transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
  -webkit-transform: translateX(-50%) rotate(125deg);
  transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(-55deg);
  transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
  -webkit-transform: translateX(-50%) rotate(55deg);
  transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
  opacity: 1;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
}
@media screen and (max-width: 520px) {
  .nav-slide a.prev,
  .nav-reveal a.prev,
  .nav-doubleflip a.prev,
  .nav-fillslide a.prev,
  .nav-growpop a.prev {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
  }
  .nav-slide a.next,
  .nav-reveal a.next,
  .nav-doubleflip a.next,
  .nav-fillslide a.next,
  .nav-growpop a.next {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
  }
  .nav-slide a,
  .nav-reveal a,
  .nav-doubleflip a,
  .nav-fillslide a {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  .nav-growpop a {
    -webkit-transform: translateY(-50%) scale(0.6);
    transform: translateY(-50%) scale(0.6);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
  <h3 class="center_rounded_ol">Man-to-man suggestions</h3>
  <ol class="rounded-list center_rounded_ol">
    <li>
      <a href="" id="foo">Name Surname</a>
    </li>

  </ol>
</section>

<nav class="nav-fillpath">
  <a class="next">
    <span class="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.

Answer 2

There is a typo in load() function:

function load() {
  $("#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:

function burn(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.