Question

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

当我尝试这样做时，我在浏览器控制台中收到以下错误：

未捕获RangeError：超出最大调用堆栈大小

这是我的代码：

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

我尝试过以各种方式使用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>

更新基本标记是：

object_mask = "mask[orderItem[order[userRecord[username]]], invoiceItem[totalRecurringAmount]]"

billing = SoftLayer::Service.new("SoftLayer_Account",:username => user_id,:api_key => api_key)
user_bill=billing.object_mask(object_mask).getNextInvoiceTopLevelBillingItems

Answer 1

您是否尝试过使用trigger方法？

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

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

最后，实际的父div应该是获取事件的那个吗？你总是可以使用另一个div做这项工作，并使用css属性按预期定位。

Answer 2

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

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 3

尝试使用这样的，

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

Answer 4

最后我采取了一种不同的方法来消除错误。我没有在单个外部元素上设置click事件，而是将其设置在几个内部元素上。

jQuery( ".wrapper > .image, .wrapper > .desc, .wrapper .other-stuff" ).click(function() {
    jQuery(this).parent().find("span.choose").click();
    jQuery(this).parent().find("button.submit").click();
});
jQuery( ".wrapper .select1").click(function() {
    jQuery(this).parent().find("button.submit").click();
});

我的jQuery .click事件正在创建一个错误，因为它有一个click（）事件

4 个答案: