Question

因此，我正在开发一个脚本，该脚本在Bootstrap中使用下拉列表（类typeahead_list）和文本框（类et_email）。每当文本框失去焦点时，我都需要关闭下拉列表。但是，如果有人点击下拉列表中的一个列表项（类et_li），则该列表项的内容必须填充文本框，然后才能关闭下拉列表。

注意：所有 lis 都是动态生成的。我不知道这是否有所作为。

此代码将 li 内容放入文本框中，但不会关闭下拉列表。

$( ".et_email" ).focusout(function() {
    $(".typeahead_list").on("click", "li", function() {
        $(".et_email").val($(this).text());});  
    //$(".typeahead_list").hide();
});

此代码会关闭下拉列表，但不会将 li 的内容放入文本框中。

$( ".et_email" ).focusout(function() {
    $(".typeahead_list").on("click", "li", function() {
        $(".et_email").val($(this).text());});  
    $(".typeahead_list").hide();
});

有关如何解决此问题的任何想法？冲突来自哪里？

更新：

Alex Cassady建议采取以下措施：

$(".typeahead_list").on("click", "li", function() {
    $(".et_email").val($(this).text()); // copy value
    $(".typeahead_list").hide(); // then hide
});

感谢您的帮助。我之前已经研究过类似的解决方案了。但是，我遇到了一个问题，因为每当电子邮箱因任何原因失去焦点时我都需要关闭下拉菜单...同时仍然响应li点击。在此示例中，仅当有人点击li时才会关闭下拉列表。

但是如果我尝试在$（document）.ready（）中为$（“。etc_email”）。focusin（）添加另一个处理程序，它会完全使该函数的效果无效。它就像$（“。ie_email”）。focusout（）和$（“。typeahead_list”）。on（“click”，“li”，function（）{}）不能同时存在于同一个Universe中。存在某种冲突。

基本上，我需要实现的规则是：当et_email因任何原因失去焦点时总是关闭下拉列表...但是如果由于使用typeahead_list div点击li而丢失焦点，则用文本框填充内容关闭下拉列表之前的那个李。

Answer 1

您将点击侦听器绑定到将立即隐藏的元素，因此无法单击！如果您评论hide()行，它的工作原理是因为可以点击它。

如果您只想隐藏文本：

$( ".et_email" ).focusout(function() {
    $(".et_email").val($(".typeahead_list").text());  
    $(".typeahead_list").hide();
});

编辑：

好吧我觉得我对你要做的事情有了更好的理解。这不是一个干净的解决方案，但会完成这项工作。

有一个全局变量'focusLost'或任何东西，每当.et_email失去焦点并在一秒钟内设置为false时，它将被设置为true。在.typeahead_list点击监听器中，我们检查focusLost是否为真。

var focusLost = false;

$('.typeahead_list').on('click', function () {
    if (focusLost) {
        $('.et_email').val(($(this).text()));
        $(this).hide();
    }
});

$('.et_email').focusout(function () {
    focusLost = true;
    setTimeout(function () {
        $('.typeahead_list').hide();
        focusLost = false;
    }, 1000);
});

jsfiddle DEMO

Answer 2

正如A.沃尔夫所说，不要筑巢处理人员。焦点事件绑定到所有.et_email，但点击事件未绑定到.typeahead_list，直到触发焦点输出事件。

在更改值之前隐藏.typeahead_list。 Focusout与点击.et_email外部相同，并且首先调用它。完全删除focusout事件处理程序应解决问题。

$(".typeahead_list").on("click", "li", function() {
    $(".et_email").val($(this).text()); // copy value
    $(".typeahead_list").hide(); // then hide
});

编辑：你也可以尝试复制$ .hide（）

的回调函数中的值

$(".typeahead_list").on("click", "li", function() {

    $(".typeahead_list").hide( function() {
        $(".et_email").val($(this).text()); // copy value
    }); // then hide
});

.hide（）和.onclick（）

2 个答案: