Javascript 父侦听器$（此）侦听所有选定的子元素

当用户单击添加项时，在父元素上追加一个新项，然后单击该项，文本区域将提示编辑其文本

HTML DOM/

项目文本

JS（jQuery）/

var$item=“此处文本…”，
$itembtn=$（'a.additem'），
$editor=$（'div.editor'），
$opt=$（'div.options'）；
$itembtn.on（'click'，函数（e）{
e、 预防默认值（）；
$editor.show（）；
$editor.append（$item）；
});
$（$editor）.on（'click'，'div.item'，function（）{
var$this=$（this）；
$opt.show（）；
$opt.find（'textarea'）.val（$this.text（））；
$opt.find（'textarea'）。在（'keyup'，function（）上{
$this.text（$opt.find（'textarea'）.val（））；
});
});
$（$editor）.on（'blur'，'div.item'，function（）{
$opt.hide（）；
});

但是看起来$（this）并不是指向单个单击的元素，而是指向所有单击/选择的子元素

而且模糊事件也不起作用

---

如何将$this仅指向一个选定项目而不是所有单击的项目？

在添加keyup事件之前，请销毁您在单击div时添加的keyup事件，然后单击yes完成

使用

$（元素）.off（'keyup'）

解除上一个keyup事件的绑定，然后使用

$（元素）.on（'keyup'，函数）

添加当前事件

检查代码段

var$item=“此处文本…”，
$itembtn=$（'a.additem'），
$editor=$（'div.editor'），
$opt=$（'div.options'）；
$itembtn.on（'click'，函数（e）{
e、 预防默认值（）；
$editor.show（）；
$editor.append（$item）；
});
$（$editor）.on（'click'，'div.item'，function（）{
var$this=$（this）；
$opt.show（）；
var txtEd=$opt.find（'textarea'）；
val（$this.text（））；
txtEd.off（'keyup'）。on（'keyup'，function（））{
$this.text（$opt.find（'textarea'）.val（））；
});
});
$（$editor）.on（'blur'，'div.item'，function（）{
$opt.hide（）；
});
.editor{margin:20px 0px；border:1px solid#888；padding:5px；display:none；}
.项目{背景：#ccc；边距：5px；填充：5px；}
.options text区域{宽度：80%；高度：100px；}
.options{display:none；}


项目文本

在添加keyup事件之前，请销毁您在单击div时添加的keyup事件，然后单击“是”完成

使用
$（元素）.off（'keyup'）
解除上一个keyup事件的绑定，然后使用
$（元素）.on（'keyup'，函数）
添加当前事件

检查代码段


var$item=“此处文本…”，
$itembtn=$（'a.additem'），
$editor=$（'div.editor'），
$opt=$（'div.options'）；
$itembtn.on（'click'，函数（e）{
e、 预防默认值（）；
$editor.show（）；
$editor.append（$item）；
});
$（$editor）.on（'click'，'div.item'，function（）{
var$this=$（this）；
$opt.show（）；
var txtEd=$opt.find（'textarea'）；
val（$this.text（））；
txtEd.off（'keyup'）。on（'keyup'，function（））{
$this.text（$opt.find（'textarea'）.val（））；
});
});
$（$editor）.on（'blur'，'div.item'，function（）{
$opt.hide（）；
});
.editor{margin:20px 0px；border:1px solid#888；padding:5px；display:none；}
.项目{背景：#ccc；边距：5px；填充：5px；}
.options text区域{宽度：80%；高度：100px；}
.options{display:none；}


项目文本

嗯，这很容易

更改此项：

$($editor).on('click', 'div.item', function(){
    var $this = $(this);
    console.log($this);
    $opt.show();
    $opt.find('textarea').val($this.text());
    $opt.find('textarea').on('keyup', function(){
        $this.text($opt.find('textarea').val());
    });
});

为此：

$($editor).on('click', 'div.item', function(){
    var $this = $(this);
    console.log($this);
    $opt.show();
    $opt.find('textarea').unbind('keyup').keyup(function(){
        $this.text($opt.find('textarea').val());
    }).val($this.text());
});


由于要在（[…]）
每个元素上添加
，因此始终要添加一个新的事件侦听器。您可以
.unbind（）
将其绑定，这样它就不会绑定到该元素。然后你再把它绑起来

在这种情况下，使用
.on（）
是不好的

更改此项：

$($editor).on('click', 'div.item', function(){
    var $this = $(this);
    console.log($this);
    $opt.show();
    $opt.find('textarea').val($this.text());
    $opt.find('textarea').on('keyup', function(){
        $this.text($opt.find('textarea').val());
    });
});

为此：

$($editor).on('click', 'div.item', function(){
    var $this = $(this);
    console.log($this);
    $opt.show();
    $opt.find('textarea').unbind('keyup').keyup(function(){
        $this.text($opt.find('textarea').val());
    }).val($this.text());
});


由于要在（[…]）
每个元素上添加
，因此始终要添加一个新的事件侦听器。您可以
.unbind（）
将其绑定，这样它就不会绑定到该元素。然后你再把它绑起来

在此上下文中，使用
.on（）
是错误的
一种方法是保留当前“活动”div（单击的div）的变量，并使用该变量设置文本


var$item=“此处文本…”，
$itembtn=$（'a.additem'），
$editor=$（'div.editor'），
$opt=$（'div.options'），
$txt=$opt.find（'textarea'），
$curtxt；
$itembtn.on（'click'，函数（e）{
e、 预防默认值（）；
$editor.show（）；
$（$item）.附加到（$editor）.单击（函数（）{
$curtxt=$（此项）；
$txt.val（$curtxt.text（））；
$opt.show（）；
$txt.select（）.focus（）；
});    
});
$txt.keyup（函数（）{
$curtxt.html（$txt.val（）.replace（/\r？\n/g，
）；
}).blur（函数（）{
$opt.hide（）；
});
一种方法是保留当前“活动”div的变量（单击div），并使用该变量设置文本


var$item=“此处文本…”，
$itembtn=$（'a.additem'），
$editor=$（'div.editor'），
$opt=$（'div.options'），
$txt=$opt.find（'textarea'），
$curtxt；
$itembtn.on（'click'，函数（e）{
e、 预防默认值（）；
$editor.show（）；
$（$item）.附加到（$editor）.单击（函数（）{
$curtxt=$（此项）；
$txt.val（$curtxt.text（））；
$opt.show（）；
$txt.select（）.focus（）；
});    
});
$txt.keyup（函数（）{
$curtxt.html（$txt.val（）.replace（/\r？\n/g，
）；
}).blur（函数（）{
$opt.hide（）；
});
您的模糊事件无法工作，因为您将其附加到了错误的元素。纯粹是为了替代，您可以使用跟踪“活动”div的变量来执行相同的操作，而不是解除绑定和绑定keyup处理程序：不是更好或更坏，主要是在后台窗口中仍然打开小提琴；）@Me.Name那很聪明（8）@Me.Name我要用这个，从没想过推一个元素然后引用它！还有一个问题，如何插入新的
var $item    = "<div class='item'>Text here...</div>",
    $itembtn = $('a.additem'),
    $editor  = $('div.editor'),
    $opt = $('div.options'),
    $txt = $opt.find('textarea'),
    $curtxt;

$itembtn.on('click', function(e){
    e.preventDefault();
    $editor.show();
    $($item).appendTo($editor).click(function(){
        $curtxt = $(this); 
        $txt.val($curtxt.text());
        $opt.show();
        $txt.select().focus();
    });    
});

$txt.keyup(function(){
    $curtxt.html($txt.val().replace(/\r?\n/g, '<br>'));
}).blur(function(){
    $opt.hide();
});