一个事件处理程序覆盖第二个事件处理程序

One event handler overrides second event handler

本文关键字：事件处理 程序 第二个 覆盖 一个      更新时间：2023-09-26

这是一个PHP字符串，显示出来:

$('.$name input').on( 'blur', function(e){
        $('span.$name div ul').on('click', 'li', function(ev){
            var value = $(this).attr('value');
            var html = $(this).html();
            console.log(value);
            $('span.$name select').val( value );
            $('span.$name input').val( html );
            $('span.$name div').hide();
        });
    });

我有一个处理程序，当它的输入失去焦点，点击列表项它做一些事情，隐藏div，但我想隐藏当输入失去焦点，它没有点击列表元素

如果我尝试这样做:

$('.$name input').on( 'blur', function(e){
        $('span.$name div ul').on('click', 'li', function(ev){
            var value = $(this).attr('value');
            var html = $(this).html();
            console.log(value);
            $('span.$name select').val( value );
            $('span.$name input').val( html );
           
        });
 $('span.$name div').hide();
    });

它只是关闭div和click事件处理程序根本不起作用。没有错误，没有。

这个不行:

$('.$name input').on('blur',
  function (e) {
    $('span.$name div').hide();
});

$('span.$name div ul').on('click', 'li', function (ev) {
   var value = $(this).attr('value');
    var html = $(this).html();console.log(value);
    $('span.$name select').val(value);
        $('span.$name input').val(html);
});

我如何解决我的问题?

编辑:

演示:http://jsfiddle.net/e2dw18z0/

我想我明白你是怎么陷入这个问题的了。当你离开输入并点击div时，输入的悬停事件在点击注册到div上之前关闭了div。所以一个非常快速的修复方法是:

    $('.test_name input').on( 'blur', function(e){
        window.setTimeout(function() {
            $('span.test_name div').hide();
        }, 100);
    });

如下所示:

http://jsfiddle.net/sifriday/e2dw18z0/1/

超时确保有时间为div点击注册，如果它即将到来。如果没有，没有问题，无论哪种方式，弹出框都会按预期关闭。正如adeneo上面所评论的那样，这也整理了嵌套的事件代码。

一种更简洁的方法是在文档上点击来关闭弹出窗口，但只有当弹出窗口是可见的并且输入没有焦点时:

    $(document).on( 'click', function(e){
        if (
            $('span.test_name div').is(":visible") && 
            !($('span.test_name input').is(':focus'))
        ) $('span.test_name div').hide()
    });

如下所示:

http://jsfiddle.net/sifriday/e2dw18z0/3/

相关文章：