我想在我的列表应用中添加一项功能，允许用户在页眉收到NotFoundError: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist事件时重命名其列表的标题内嵌。
我找到了一些允许内联编辑的代码（fiddle here。）
但是，当我在自动执行的匿名闭包中将此代码包含在我的应用中时，我只能重命名列表一次。
重命名列表的后续尝试会引发：<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="_css/bootstrap.css"></>
<link rel="stylesheet" type="text/css" href="_css/noted.css"></>
</head>
<body>
<div class="row">
<div class="col-md-3 col-md-offset-2">
<div id="listHeader"><form><input type="hidden" name="hiddenField" /></form></div>
<div style="height: 50px;"></div>
<form class="form-group">
<label for="listName">Note</label>
<input type="text" class="form-control" id="listName" placeholder="New List">
<div style="height: 10px;"></div>
<button id="newList" type="button" class="btn btn-primary">New List</button>
<div style="height: 10px;"></div>
<label for="itemContent">Item</label>
<input type="text" class="form-control" id="itemContent" placeholder="Text input">
<div style="height: 10px;"></div>
<button id="addItem" type="button" class="btn btn-primary">Add item</button>
</form>
<div id="listMaster"></div>
</div>
<div style="height: 75px;"></div>
<div id="sidebar" class="col-md-2 col-md-offset-1" style="border: 1px black dashed;">sidebar
<ul id="listList"></ul>
</div>
</div><!-- row -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="_lib/_js/bootstrap.js"></script>
<script type="text/javascript" src="_lib/_js/noted.js"></script>
</body>
</html>
(function () {
var listName, listMaster, crrntActvLst, inActvLsts, itemNos, replaceWith = $('<input name="temp" type="text" />'),
connectWith = $('input[name="hiddenField"]');
(function () { $.fn.inlineEdit = function(replaceWith, connectWith) {
$(this).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(this).click(function() {
var elem = $(this);
elem.hide();
elem.after(replaceWith);
replaceWith.focus();
replaceWith.blur(function() {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.text($(this).val());
}
$(this).remove();
elem.show();
});
});
};
}());
$('#newList').on('click', function (){
listName = $('#listName').val();
listMaster = $('#listMaster');
// crrntActvLst = $('#listMaster ul.active');
// inActvLsts = $('#listName ul.inactive');
$('#listMaster ul').addClass('inactive')
.removeClass('active')
.fadeOut();
$('#listHeader').html('<h3 class="inplace-editor">' + listName + '</h3>'); // displays currently active (new) list in header
$('#listMaster').prepend('<ul' + ' id="' + listName + '"' + ' class="active"' + '></ul>'); // adds new list to #listMaster
$('#listList').prepend('<li class="list-group-item" ' + 'data-title="' + listName + '"' + '>' + listName + '</li>'); //adds list title to #sidebar.
}); //add new list event handler
$('#listHeader').on('click', 'h3', function () {
$(this).inlineEdit(replaceWith, connectWith);
}); //inline rename code
}());
。
然而，上面jsFiddle中的原始代码允许用户根据需要多次重命名单击的文本。
只需要第二双眼睛。无法理解为什么这段代码只能运行一次，然后对我来说错误，但在它的起源小提琴中完美无缺。
this答案 0 :(得分：0)
好的，仔细观察......
replacewith定义一次（在开头），但稍后在模糊事件中删除（$(this).remove()）。我没有看到它再次添加到哪里，所以它只能工作一次。