我想做一个<p>
标签可通过单击进行编辑。我的问题:它只能编辑一次。第二次单击后,我的控制台中收到一条错误消息。
请参阅此处的 fiddle :http://jsfiddle.net/LnD8d/1/
HTML:
<div id="profile_description"><p>Click to add description</p></div>
JAVASCRIPT:
function editDiv(element_to_be_edited, update_description) {
var divHtml = element_to_be_edited.text();
var editableText = $("<textarea />");
editableText.val(divHtml);
element_to_be_edited.replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.on('blur', function() {
var html = $(this).val();
var viewableText = $("<p>");
viewableText.html(html);
$(this).replaceWith(viewableText);
// setup the click event for this new div
viewableText.click(editDiv);
// if update_description=true, update description ...
if (update_description == true) {
console.log('description has been updated');
}
});
} // /function editDiv();
$(document).ready(function() {
$('#profile_description p').on('click', function() {
console.log('click on p tag');
var element_to_be_edited = $(this);
var update_description = true;
editDiv(element_to_be_edited, update_description);
});
});
谁能明白为什么标签只能编辑一次而不能在第二次点击时编辑吗?
最佳答案
您替换了 p,因此点击处理程序不再起作用。解决这个问题最简单的方法是使用事件委托(delegate)。更改文档内的事件处理程序声明准备
$('#profile_description').on('click', "p", function() {
关于javascript - jQuery:编辑标签只能工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24597263/