Question

这是我的情景：

有一个简单的文本输入和两个事件：Focus In / Out。

聚焦在“清除”按钮将出现在文本输入上（与右侧对齐）。在Focus Out中，“clear”按钮将被隐藏。

这两个动作只使用.show（）/ .hide（）jQuery方法。

“清除”按钮有一个点击事件，它只是将文本输入值设置为空。

问题是：当尝试点击“清除”按钮时，Focus Out事件会在“清除”按钮事件之前被触发，因此隐藏“清除”按钮并且不会触发点击事件。

我已经尝试使用.on / .live / etc。

附加事件（到清除按钮）

我找到的唯一解决方法（到目前为止）是使用timeOut隐藏清除按钮（它在Focus Out事件中发生），但我不确定此解决方案的可靠性。

提前致谢！：）

Answer 1

我必须要玩它才能确定，但是你不能只将按钮的宽度（和填充/边框/边距）设置为0而不是隐藏它吗？这样它仍然在页面上，我认为点击事件将通过它。

编辑：不，等等，我才意识到它不起作用。当鼠标按钮按下时，文本框失去焦点，并且在释放鼠标按钮之前不会触发单击事件。

Answer 2

var clear_button_timeout_id = null;
var clear_button = '<button class="clear">Clear</button>';

$('div').on('click', '.clear', function () {
    $(this).parent().find('input').val('');
});

$('input')
    .on('focus', function () {
        if (!$(this).parent().find('.clear').length) {
            $(this).after(clear_button);       
        }

        if (clear_button_timeout_id) {
            clearTimeout(clear_button_timeout_id);
        }
    })
    .on('blur', function () {
        var that = this;

        clear_button_timeout_id = setTimeout(function () {
            $(that).parent().find('.clear').remove();
        }, 2000)
    });

Fiddle

jQuery事件在特定场景中没有触发

2 个答案: