Question

我的 jQuery .click 事件发生错误，因为它内部有一个 click() 事件

2016-06-10

1142

javascript jquery onclick jquery-events

我有一个外部 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。如果到达，它将再次触发按钮点击，因此链会继续，并发生 stack size beyond 错误。

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

Answer 2

您没有尝试使用 trigger 方法吗？

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

另一个提示可能是在按钮点击处理程序本身中添加 event.stopPropagation(); ，以防止冒泡到父 div。

最后，实际的父 div 应该是获取事件的 div 吗？您始终可以使用另一个 div 来完成工作，并使用 css 属性将其定位为预期位置。

Answer 3

尝试这样使用，

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