父监听器$（this）正在监听所有选定的子元素

当用户单击时，添加一个项目在父元素上添加一个新项目，然后单击该项目textarea会提示编辑其文本。

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

但似乎$（这）不是指向一个单一的点击的元素，取而代之的则是指向所有点击/选择的子元素！

enter image description here

而且模糊事件不起作用！

我怎么能指出$这只有一个选定的项目，但不是所有的点击项目？

来源

2015-08-20 rakibtg

你模糊的事件不工作，因为你将其连接到错误的元素。 – Stryner

纯粹是为了替代方案，而不是解除绑定和绑定keyup处理程序，你可以做跟踪'active'div的变量：http://jsfiddle.net/67ndb0u8/1/不是更好或更糟，主要是一个仍然有小提琴在背景窗口中打开的情况;） –

@ Me.Name很聪明8） – rakibtg

一种方法是保持当前的“活动”的div（点击DIV）的变量，并用它来设置文本。

Fiddle

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

来源

2015-08-20 16:28:46

添加keyup事件摧毁你的div点击添加keyup事件前后是对其做

使用$(element).off('keyup')取消绑定先前keyup事件，然后添加使用$(element).on('keyup',function)当前事件。

检查片段

var $item = "<div class='item'>Text here...</div>", 
 
    $itembtn = $('a.additem'), 
 
    $editor = $('div.editor'), 
 
    $opt = $('div.options'); 
 
$itembtn.on('click', function(e){ 
 
\t e.preventDefault(); 
 
    $editor.show(); 
 
    $editor.append($item); 
 
}); 
 

 
$($editor).on('click', 'div.item', function(){ 
 
    var $this = $(this); 
 
    $opt.show(); 
 
    
 
    var txtEd = $opt.find('textarea'); 
 
    txtEd.val($this.text()); 
 
    txtEd.off('keyup').on('keyup', function(){ 
 
    \t $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; } 
 
.item { background: #ccc; margin: 5px; padding: 5px; } 
 
.options textarea { width: 80%; height: 100px; } 
 
.options { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

来源

2015-08-20 15:22:07 joyBlanks

好了，这是很容易...

更改此：

$($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()它，所以它不会绑定到该元素。然后你重新绑定它。

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

来源

2015-08-20 15:22:58

父监听器$（this）正在监听所有选定的子元素

回答

相关问题