Question

当我单击.letitre时，我想模拟子元素.mybutton中的单击

HTML：

<div class="letitre">
    <div class="mybutton">Button</div>
</div>
<div class="letitre">
    <div class="mybutton">Button</div>
</div>

JS：

此功能有效（模拟点击效果很好），但是它将始终在第一个.mybutton上单击，而不是在子.mybutton中单击，其中.letitre是父级。

$(function(){
    $("body").on("click", ".letitre",function(){
        $(".mybutton").click();
    });
});

我尝试了此操作，但它没有用（根本没有点击）

$(function(){
    $("body").on("click", ".letitre",function(){
        var button = $(this).find(".mybutton");
        $(button).click();
    });
});

Answer 1

您需要找到该按钮并单击它，如果委派一个，则需要同时委派两个人

也必须停止传播，否则您将循环播放

$(function(){
  $(document).on("click",".letitre", function(){
    $(this).find(".mybutton").click();
  });
  $(document).on("click",".mybutton", function(e){
    e.stopPropagation(); // make sure the click stops here
    console.log($(this).text())
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="letitre">
    <div class="mybutton">Button</div>
</div>
<div class="letitre">
    <div class="mybutton">Button2</div>
</div>

Answer 2

另一个无需使用jQuery就可以轻松解决的问题：

document.addEventListener('click', ({target}) => {
  if (target.matches('.letitre')) {
    target.childNodes[1].click();
    console.log("clicked child:");
  }
  // just so you see .mybutton gets clicked
  if (target.matches('.mybutton')) {
      console.log(".mybutton received the click!");
  }
})

.mybutton { color: #a00; }

<div class="letitre">Outside
    <div class="mybutton">Button</div>
</div>
<div class="letitre">Outside
    <div class="mybutton">Button</div>
</div>

点击父项，然后点击子项

2 个答案: