使用jQuery单击父级时触发提交按钮的单击

Question

我有一个包装在div中的提交按钮。 单击div时，我想在“提交”按钮上触发click事件。 问题是，此单击事件冒泡并导致堆栈溢出/无限循环。 当我尝试停止传播子点击事件时，此问题无法解决。

HTML：

<div class="container">
    <input type="submit" value="OK">
</div>

jQuery的：

$('.container').click(function () {
    var input = $(this).find('input');
    input.trigger('click');
    input.click(function(event) {
        event.stopPropagation();
    });
});

这仍然会导致堆栈溢出错误。 返回false也是如此：

$('.container').click(function () {
    var input = $(this).find('input');
    input.trigger('click');
    return false;
});

帮助赞赏！

Answer 1

不要在容器内单击绑定按钮单击事件。 应该是这样

$('.container').click(function() {
    var input = $(this).find('input');
    input.trigger('click');
});

$('input').click(function(e) {
    e.stopPropagation();
    alert('button clicked');
});

您的代码的问题在于，容器单击甚至在其各自的单击处理程序尚未注册之前就触发了内部按钮单击，因此它没有机会停止事件冒泡。