jQuery事件没有在特定情况下触发

问题描述：

这里是我的场景：jQuery事件没有在特定情况下触发

有一个简单的文本输入和两个事件：焦点输入/输出。

在聚焦在“清除”按钮会出现在文本输入（靠右对齐）。聚焦“清除”按钮将被隐藏。

这两个动作简单地使用一个.show（）/ .hide（）jQuery方法。

“清除”按钮有一个点击事件，这无非是设置文本输入值空。

问题是：当试图单击该“清除”按钮，焦点移出事件被“清除”按钮事件之前发射，所以“清除”按钮被隐藏，然后单击事件未被触发。

我已经尝试过用。对附着事件（到透明按钮）/ .live /等

唯一的解决方法我发现（到目前为止）是隐藏清除按钮（它在happends Focus Out事件），但我不确定这个解决方案有多可靠。

在此先感谢！ :)

请张贴代码 – Popnoodles 2013-03-20 19:16:30

答

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

嗨ethagnawl，这几乎是我找到的解决方法，唯一的问题是，使用此解决方案，如果例如更改超时时间让说50毫秒，你会看到它不能按预期工作（没有足够的时间对于输入事件被解雇），这就是我所说的可靠解决方案。记住任何其他可能的解决方法?,无论如何ethagnawl :) – joTa 2013-03-20 19:44:20

在这种情况下，为什么你会将超时设置为如此之小？ ;）将按钮放置几秒钟并没有什么坏处。焦点处理程序可以销毁任何现有的按钮，以确保同时不会有两个可见的按钮，如果这是您的担忧。我的另一个想法是在父元素上使用mouseover/out，但这在键盘导航的情况下并不适用... – pdoherty926 2013-03-20 19:59:07

嗨，我知道也许一些其他解决方法可能正常工作，但对于我需要我将这个解决方案作为正确的解决方案。同时请记住，超时延迟会影响行为。 CYA！ – joTa 2013-03-21 12:13:49

答

我会发挥它是一定的，但你不能只设置按钮的宽度（和填充/边境/保证金）为0，而不是隐藏它的？这样它仍然在页面上，我认为点击事件会通过它。

编辑：不，等等，我才意识到它不会工作。当您的鼠标按钮关闭时，文本框会失去焦点，并且直到释放鼠标按钮，点击事件才会触发。

而是隐藏它的，宽度设置为0，和而不是显示它的宽度设置为正常。当它可见时点击它，onBlur将会触发，将其宽度设置为0（从而使其不可见），然后我认为onClick仍然可以工作......而且我猜你刚刚意识到这一点，因为你删除了你的评论。 – user1618143 2013-03-20 19:27:22

嗨，到目前为止生病留在timeOut解决方法，当我回家我会给它一个尝试你的解决方案，顺便说一句，我没有删除任何评论，我只是编辑了我为另一个用户写的答案，欢呼！ – joTa 2013-03-20 20:03:10

是的，其他人发表了评论，询问你应该如何点击一个0宽度的按钮，然后在我回复时删除它。 – user1618143 2013-03-20 20:21:02

jQuery事件没有在特定情况下触发

相关推荐