父監聽器$（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）正在監聽所有選定的子元素

回答

相關問題