用最近的div上的trigger（）强制单击

Question

您好我有以下代码：

$('.myInput').click(function() {
  $('.addon').trigger('click');
});

$('.addon').click(function() {
  console.log("Clicked");
});

.wrapper {
  display: flex;
  flex-direction: column;
}
.inputWithAddon {
  display: flex;
  margin-bottom: 10px;
}
input {
  height: 20px;
}
.addon {
  width: 26px;
  height: 26px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
</div>

当我点击输入时，我想在我的绿色div上强制点击trigger()。这应该是当前点击输入的div（在右侧）。此刻，它调用所有绿色div的点击（查看控制台）。我想为点击的输入的div做这个。我试过closest()：

$(this).closest('.addon').trigger('click');

它不起作用。

有什么想法吗？

感谢。

Answer 1

尝试使用Jquery的兄弟属性

$(this).siblings('.addon').trigger('click');

Answer 2

可能的解决办法是：

$(this).parent().find('.addon').trigger('click');

或@Mohammad提到的最短：

$(this).next().trigger('click');

或@Deepak Singh回答：

$(this).siblings('.addon').click();

或@freedomn-m提到了（更多）布局独立解决方案：

$(this).closest(".inputWithAddon").find(".addon").click();

$('.myInput').click(function() {
  $(this).next().trigger('click');
});

$('.addon').click(function() {
  console.log("Clicked");
});

.wrapper {
  display: flex;
  flex-direction: column;
}
.inputWithAddon {
  display: flex;
  margin-bottom: 10px;
}
input {
  height: 20px;
}
.addon {
  width: 26px;
  height: 26px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
  <div class="inputWithAddon">
    <input class="myInput">
    <div class="addon"></div>
  </div>
</div>