javascript - 使用 jQuery 单击父项时触发提交按钮的单击

Question

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

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

不要在容器内绑定(bind)按钮点击事件。应该是这样的

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

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

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