Question

我有一个输入元素。当焦点关闭div时，我也有一个处理程序，当你在输入是onfocus时点击div中的一个项目时，它会改变一个选择输入值。问题是他们不能一起工作。这只是覆盖了整个事情：

    $('.$name input').on( 'blur', function(){
        $(this).siblings('div').eq(0).hide();
   });

和第二个处理程序：

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

如何解决我的问题？我尝试在第一个处理程序中使用event.target，但它返回输入框。

这是Html代码，如果有帮助：

<span class="test_name"><select id="peteris" class="mana-klase" style="width:200px;background-color:red; display:none;" inroto="test_name" name="test_name">
<option value="1">viens</option>
<option value="2" selected="selected">divi</option>
<option value="3">tris</option>
</select><input id="peteris" class="mana-klase" style="width:200px;background-color:red;" inroto="test_name" type="text" value="divi" name=""><div style="position: relative; top: -20px; left: 1px; width: 200px; display: none; background-color: blue;" inroto="test_name"><ul><li value="1">viens</li><li value="2">divi</li><li value="3">tris</li></ul></div>
        <script>
            var input = 'input[inroto="input-test_name"]';
            var div = 'div[inroto="div-test_name"]';
            var select = 'div[inroto="select-test_name"]';
            var span = 'div[inroto="span-test_name"]';

            if ( $(div).css('width') == '0px' )
            {
                var inputWidth = $( input ).css('width');
                $( div ).css('width', inputWidth );
            }




            $('.test_name input').on( 'blur', function(){
              $('span.test_name div ul').on('click', 'li', function(){
                var value = $(this).attr('value');
                $('span.test_name select').val( value );
            });
                $(this).siblings('div').eq(0).hide();
           });

            $('.test_name input').on( 'focusin', function(){
                $(this).siblings('div').eq(0).show();
            });


            $('.test_name input').on('keyup', function(){
                var that = this;
                var list = $(this).siblings('div').eq(0).children();
                $( list ).empty();

                var selected = $(this).siblings('select').eq(0).children();
                $(selected).each( function() {
                if ( $(this).html().indexOf( $( that ).val() ) != -1 )
                    $( list ).append('<li value="' + $(this).val() + '">' + $(this).html() + '</li>' );
                });
            });





        </script></span>

现在的整个处理程序：

   $('.$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(); 
    });

最后一个例子不起作用。

Answer 1

  $('.$name input').on( 'blur', function(e){
            $(e.currentTarget).siblings('div').eq(0).hide();
       });

        $('span.$name div ul').on('click', 'li', function(e){
            var value = $(e.currentTarget).attr('value');
            $('span.$name select').val( value );
        });

EDITED **

尝试添加

   $('.test_name input').on( 'focusin', function(){
                $(this).siblings('div').eq(0).show();
                $(this).trigger( 'keyup' );
            });

会在你聚焦的时候触发你的func，以便它运行选择的东西

Answer 2

我不知道我是否真的理解了你的问题，但你可以查看jsfiddle这个有效的例子。刚改变了一些东西：添加了这两行代码：

$('.test_name input').val($(this).text());
$('span.test_name div').hide();

并删除：

$(this).siblings('div').eq(0).hide();

希望它有用！

获取事件处理程序中的clicked元素

2 个答案: