Trigger a Click on a Different Element When Clicking an Other Div

Trigger click on a element by clicking another element

You can use eq() that will allow you to select element based on his index and use index() to get the index of an element. With both functions, you can easily map the i-th element in the first container with the i-th element of the second one.

$(".news .news-item").click(function() {  $(".news-info").find(".info-item").eq($(this).index()).trigger('click');});

/* To test the click event */$(".info-item").click(function() {  $(this).css('color', 'red');})

div {  padding: 10px;  border: 1px solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="news">  <div class="news-item">a</div>  <div class="news-item">b</div>  <div class="news-item">c</div></div>
<div class="news-info">  <div class="info-item">1</div>  <div class="info-item">2</div>  <div class="info-item">3</div></div>

Click on an element triggers the click on another element [JQuery]

I would try it this way:

$(document).on('click', '#contact', function(event) { 
    event.preventDefault(); 
    $("#contattaci h2").click(); 
});

Trigger a click on a different element when clicking an other div

You can use "refs" to refer to nodes inside a component and trigger things on them.



FileBox = React.createClass({
        _handleClick: function(e) {
            var inputField = this.refs.fileField;
            inputField.click()
        },
        render: function() {
            return <div id="test" onClick={this._handleClick}>
                       <input ref="fileField" type="file" name="image1" accept=".jpg,.jpeg,.png" id="img1" />
                       <div id="uploadPhotoButtonText">
                           +Add Photo 1
                       </div>
                   </div>
        }
    })

Read more about refs here: https://facebook.github.io/react/docs/more-about-refs.html

how to trigger an event for an element when some other element is clicked in jQuery?

You need to call a function that does the job for all clicks...

Edited and added a working proof link.

$("#click1").on("click", function(){
    showMe(this);
});
$("#click2").on("click", function(){
     showMe(this);
});

$(document).on('click', function(__e){  
    if(!$(__e.target).hasClass('click')){
         $('.droppointercontainer').fadeOut(200);  
    }       
});

function showMe(__obj){
  $('.droppointercontainer').each(function(__idx, __el){
        if($(__el)[0] !== $(__obj).children('.droppointercontainer:first')[0]){
        if($(__el).css('opacity') >  0){
        $(__el).fadeOut(200);
      }
    }
});
$(__obj).children('.droppointercontainer:first').fadeIn(200);   
}

Proof

https://jsfiddle.net/2vvLe0ko/7/

JS: Can't click one element to trigger click on another

If you need the click to focus on the #url element, use .focus() instead of .click():

$(document).on('click', '#uploader', function(event) {     $("#url").focus(); });

#uploader {  width: 480px;  height: 250px;  line-height: 250px;  border: 2px dashed #443d66;  cursor: pointer;  color: #777;  font-family: 'Arial';  font-weight: bold;  text-align: center;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html><body>
  <div id="uploader">    Click  </div>        <input type="text" name="url" id="url">
</body></html>

How can I click an element positioned over another element without triggering both click events?

You may add e.stopPropagation() to the event.

div2.onclick = (e) => {
  e.stopPropagation();
    console.log("Div 2")
}

Sample Image

click one element to trigger another's link

Your JS should look like this:

var clickThis = '.clickThis';
var link = '.link';

$(clickThis).click(function(){
    $(link).css({"color": "red"});
    $(link)[0].click();
});

Remember when you select classes they return more than one element, so jQuery won't know which element to click, in your case you only have one element with that class but you still need to say which one, with [0].

Working jsfiddle sample:

http://jsfiddle.net/qf0ta0cx/1/

I added target="_blank" in the a tag just to test it without refreshing the page everytime I click it but opening the link in a new tab, you can remove it according to your preference.