javascript - 父监听器 $(this) 监听所有选中的子元素

Question

当用户点击添加一个项目时，一个新项目附加到父元素上，然后点击那个项目，一个文本区域提示编辑它的文本。

HTML DOM/JS Fiddle

<div class="editor"></div>
<a href="#" class="additem">add an item</a>
<div class="options">
    <br><b>Item Text</b> <br>
    <textarea class="itemtext"></textarea>
</div>

JS(jQuery)/JS Fiddle

var $item    = "<div class='item'>Text here...</div>",
    $itembtn = $('a.additem'),
    $editor  = $('div.editor'),
    $opt = $('div.options');
$itembtn.on('click', function(e){
    e.preventDefault();
    $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').on('keyup', function(){
        $this.text($opt.find('textarea').val());
    });
});

$($editor).on('blur', 'div.item', function(){
    $opt.hide();
});

但是 $(this) 似乎不是指向单个被点击的元素，而是指向所有被点击/选择的子元素!

而且模糊事件也不起作用!

我如何才能将 $this 指向一个选定的项目而不是所有点击的项目？

Answer 1

好吧，这很简单......

改变这个:

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

---

因为您要为每个元素添加 .on([...])，所以您总是在添加一个新的事件监听器。您可以 .unbind() 它，这样它就不会绑定(bind)到该元素。然后你重新绑定(bind)它。

在这种情况下，使用 .on() 是BAD