Jquery事件冲突

Question

这是问题的一个例子。 https://jsfiddle.net/2pucon72/2/

我的问题是点击tablerow时我想获取ID和名字但是当我点击tr时，自blur事件以来它没有给我任何价值正在运行...我该如何解决这个问题？有什么建议吗？另一件事是当我打开桌子而我想点击外面时我希望它关闭，这就是为什么我把blur事件放在那里。

这是我的代码

//this will show the table if user click on the textbox
$('#demo').on('click', function(){
    $('#appendHere').attr('style','display:block');
});

// `(body)` because this element was loaded by jquery append.
$('body').on('click', '#dropdownTable tbody tr', function() {
    // alert($(this).find('td:nth-child(1)').html() + ' : ' + $(this).find('td:nth-child(2)').html());
    $('#demo').val($(this).find('td:nth-child(2)').html());
    $('#appendHere').attr('style', 'display:none');
});

//this will close the table when on blur.(self-explanatory)
$("#demo").blur(function(){
    $('#appendHere').attr('style', 'display:none');
});

Answer 1

我想你可以在blur事件中使用延迟，而不是使用attr方法显示/隐藏只使用内置方法.show()/.hide()：

$('#demo').on('click', function(){
    $('#appendHere').show();
});

$('body').on('click', '#dropdownTable tbody tr', function() {
    $('#demo').val($(this).find('td:nth-child(2)').html());
    $('#appendHere').hide();
});

$("#demo").blur(function(){
    setTimeout(function(){
       $('#appendHere').hide();
    }, 800);
});

Fiddle Demo.