javascript - 我的 jQuery .click 事件正在创建一个错误，因为它有一个 click() 事件

Question

我有一个外部 div，里面有两个按钮。当单击外部 div 时，我希望它单击其中的两个按钮。

当我尝试执行此操作时，我在浏览器控制台中收到以下错误:

Uncaught RangeError: Maximum call stack size exceeded

这是我的代码:

jQuery( "#boz .wrapper1" ).click(function() {
    jQuery('button.select1', this).click();
    jQuery('button.submit', this).click();
});

我尝试过使用event.stopPropagation()以各种方式发挥作用，但问题仍然存在。

jQuery( "#boz .wrapper1" ).click(function( event ) {
        jQuery('button.select1', this).click();
        event.stopPropagation();
        jQuery('button.submit', this).click();
        event.stopPropagation();
});

更新基本标记是:

<div id="boz">
    <div class="wrapper">
        <div class="image"><img src="example.jpg" alt="example"></div>
        <div class="desc">Lorem Impsum</div>
        <div class="actions">
            <div class="other-stuff">Blah Bla Blah</div>
            <button class="select1">Click Me</button>
            <button class="submit">Submit Me</button>                
        </div>
    </div>
    <div class="wrapper">
        <div class="image"><img src="example.jpg" alt="example"></div>
        <div class="desc">Lorem Impsum</div>
        <div class="actions">
            <div class="other-stuff">Blah Bla Blah</div>
            <button class="select1">Click Me</button>
            <button class="submit">Submit Me</button>                                
        </div>
    </div>
    <div class="wrapper">
        <div class="image"><img src="example.jpg" alt="example"></div>
        <div class="desc">Lorem Impsum</div>
        <div class="actions">
            <div class="other-stuff">Blah Bla Blah</div>
            <button class="select1">Click Me</button>
            <button class="submit">Submit Me</button>                                
        </div>
    </div>
</div>

Answer 1

您需要在按钮的点击处理程序中使用stopPropagation。因为这会阻止事件再次到达原始 div。如果达到，它将再次触发按钮单击，因此链继续并发生堆栈大小超出错误。

jQuery( "#boz .wrapper1" ).click(function( event ) {
        jQuery('button.select1', this).click();
        // event.stopPropagation(); not required here
        jQuery('button.submit', this).click();
        // event.stopPropagation(); not required here
});

jQuery('button.select1').click(function(e){
  e.stopPropagation(); // need to use it here
});//click

jQuery('button.submit').click(function(e){
  e.stopPropagation(); // need to use it here
});//click