javascript - 即使移动位置如何确保按钮被点击

Question

参见 fiddle :http://jsfiddle.net/2fboubvs/5/

<input id="losefocus">
<div id="validationMessage">Text disappears when "valid"</div>
<div>
<button>Next</button>
</div>

JS:

$(function(){

    $('button').on('click', function(){
        alert('I was clicked');
    });

    $('#losefocus').on('change', function(){
        $('#validationMessage').hide();
    });
});

我的文本输入处于“错误”状态，下面有一条验证消息。

我输入了正确的内容，当焦点仍位于文本按钮上时，我单击了位于输入和验证消息下方的按钮。

如果我点击按钮的下方，它不会触发点击，因为删除消息也会使按钮向上移动。

有哪些解决方法？我想到的一种方法是稍微异步执行更改事件，以便首先单击按钮，然后更新值，然后删除消息。

但是，这将导致在按钮的单击处理程序中完成的输入值的任何读取都使用先前的输入值。

另外:请注意按钮:它似乎已被激活，从视觉上看它具有“按下”或“事件”的外观，但未触发单击事件。

Answer 1

您可以仅在消息上使用visibility:hidden，然后保留文本区域而不进行重排。

    $('#validationMessage').css("visibility","hidden");