单击元素外部时进行JQuery

JQuery On Click Outside Of Element

本文关键字：JQuery 元素 外部 单击      更新时间：2023-09-26

JSFiddle 上的实时演示

我知道这里有很多关于点击元素之外的问题，但我无法解决我的问题。

我的菜单第二层您可以右键单击并当前重命名列表项。您只能通过输入来执行此操作；

$("body").on("keydown", "li.Clicked>input", function (e) {
    var inputValue = $(this).val(); 
    if(e.keyCode == 13) {
        $('ul.inbox-nav > li > ul > li.Clicked a').show();
        $("ul.inbox-nav > li > ul > li.Clicked a").text(inputValue);
        $("ul.inbox-nav > li > ul > li.Clicked input").remove();
        $("ul.inbox-nav > li > ul > li.Clicked").removeClass('Clicked');
    }
});

然而，我正试图在整个菜单区域之外添加一个外部点击事件，以便上述结果也会发生或重置，无论哪种方式，但我无法设置任何内容，而它似乎会中断。

请注意：虽然此问题没有答案，但要查看菜单的完整工作形式，您必须在选择重命名时按enter键，否则.Clicked类将不会被删除。

看看这个。。。

您可以为输入元素添加一个focusout监听器。为了使它在您的用例中发挥作用，您必须在将输入元素添加到DOM之后放置侦听器附件。当您单击其他位置或输入字段外的选项卡时，focusout监听器会触发。

$('#MailMenuSecondTier li').click(function(e) {
    if ($(this).hasClass('Rename')) {
        $('ul.inbox-nav > li > ul > li.Clicked a').hide();
        $('ul.inbox-nav > li > ul > li.Clicked').append("<input type='text' value='" + $("ul.inbox-nav > li > ul > li.Clicked a").text() + "'>");
        $('ul.inbox-nav > li > ul > li.Clicked > input').select();
        $('ul.inbox-nav > li > ul > li.Clicked > input').focusout(function(){
          var inputValue = $(this).val(); 
          $('ul.inbox-nav > li > ul > li.Clicked a').show();
          $("ul.inbox-nav > li > ul > li.Clicked a").text(inputValue);
          $(this).remove();
          $("ul.inbox-nav > li > ul > li.Clicked").removeClass('Clicked');
        })
    }
});
相关文章：