我想通过单击使<p>
标记可编辑。我的问题:只能编辑一次。第二次单击后,我在控制台中收到一条错误消息。
在这里查看小提琴: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,因此点击处理程序不再起作用。解决该问题的最简单方法是使用事件委托。将文档中的事件处理程序声明更改为$('#profile_description').on('click', "p", function() {
Demo
关于javascript - jQuery:编辑标记仅可使用一次,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24597263/