CODEWITHSUNDEEP
javascriptjquery
fightstarr20
fightstarr20

Reputation: 12568

jQuery click link when another is clicked

I have an element like this

I want mylink2 to also be clicked whenever somebody clicks on mylink

To start I am trying to get the parent container on click like this

 $("#mylink").click(function(){
        parentcontainer =  this.closest('.myelement');
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
        <div class="container">
            <div class="testitem">
                <a id="mylink" href="#">
                    Test Link 1
                </a>
            </div>
        </div>
        <div class="container">
            <a id="mylink2" href="#">
                Test Link 2
            </a>
        </div>
    </div>
But now I am stuck trying to click mylink2 am I on the right track?

Upvotes: 0

Views: 107

Answers (5)

Kostis
Kostis

Reputation: 41

It should be straightforward since you are using unique IDs for the two elements. Triggering the second elements click event in the first elements handler.

     $("#mylink").on("click", function(){
      $("#mylink2").trigger("click");
     });`

Upvotes: 1

BCM
BCM

Reputation: 675

Try this:

    $('#mylink, #mylink2').on('click', function(event){
        console.log($("#mylink1").text());
        console.log($("#mylink2").text());
    });

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use closest to get the parent and then find second element and trigger click command but since you have ids maybe you can use them for selecting elements. Keep in mind that id's must be unique.

$("#mylink").click(function() {
  const parent = $(this).closest('.myelement');
  parent.find('#mylink2').trigger('click')
});

$("#mylink2").on('click', function() {
  console.log('click link 2')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
  <div class="container">
    <div class="testitem">
      <a id="mylink" href="#">
        Test Link 1
      </a>
    </div>
  </div>
  <div class="container">
    <a id="mylink2" href="#">
      Test Link 2
    </a>
  </div>
</div>

Upvotes: 1

h1b9b
h1b9b

Reputation: 1050

If your links have ids the easiest way would be to use these ids: 

$('#mylink').on('click', function(event) {
  console.log('my link click');
  $('#mylink2').click();
});
$('#mylink2').on('click', function(event) {
  console.log('my link2 click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
    <div class="container">
        <div class="testitem">
            <a id="mylink" href="#">
                Test Link 1
            </a>
        </div>
    </div>
    <div class="container">
        <a id="mylink2" href="#">
            Test Link 2
        </a>
    </div>
</div>

Upvotes: 1

Max Svidlo
Max Svidlo

Reputation: 774

you can trigger the jQuery first click to trigger the second one this way: $("#mylink").click(function(){ $("#mylink2").click(); });

taking in cosider that #mylink2 has some kind of a click handler function

Upvotes: 1

Related Questions