Javascript 为什么我的匿名闭包只执行一次？
我想在我的列表应用程序中添加一项功能，允许用户在页眉收到Javascript 为什么我的匿名闭包只执行一次？,javascript,jquery,Javascript,Jquery,我想在我的列表应用程序中添加一项功能，允许用户在页眉收到.on（'click'）事件时内联重命名列表标题 我找到了一些允许内联编辑的代码（.） 但是，当我将此代码包含在我的应用程序中的自动执行匿名闭包中时，我只能将列表重命名一次。 后续重命名列表的尝试引发：NotFoundError:DOM异常8：尝试在不存在节点的上下文中引用该节点 但是，上面JSFIDLE的原始代码允许用户根据需要多次重命名单击的文本 只需要第二双眼睛。我不明白为什么这段代码只运行一次，然后就出错了，但在它的原始版本中工作
.on（'click'）NotFoundError:DOM异常8：尝试在不存在节点的上下文中引用该节点
但是，上面JSFIDLE的原始代码允许用户根据需要多次重命名单击的文本
只需要第二双眼睛。我不明白为什么这段代码只运行一次，然后就出错了，但在它的原始版本中工作得完美无缺
<!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
}());
注
新名单
项目
添加项
边栏
（函数（）{
变量listName、listMaster、crrntActvLst、incatvlsts、itemNos、replaceWith=$（“”），
connectWith=$（'input[name=“hiddenField”]”）；
（function（）{$.fn.inlineEdit=function（replaceWith，connectWith）{
$（this）.hover（函数（）{
$（this.addClass（'hover'）；
}，函数（）{
$（this.removeClass（'hover'）；
});
$（此）。单击（函数（）{
var elem=$（本）；
隐藏元素（）；
元素之后（替换为）；
replacetwith.focus（）；
blur（函数（）{
if（$（this.val（）！=“”）{
connectWith.val（$（this.val（））.change（）；
elem.text（$（this.val（））；
}
$（this.remove（）；
元素show（）；
});
});
};
}());
$（'#newList'）。在（'click'，函数（）{
listName=$（'#listName'）.val（）；
listMaster=$（“#listMaster”）；
//crrntActvLst=$（'listMaster ul.active'）；
//inActvLsts=$（“#listName ul.inactive”）；
$（'listMaster ul'）.addClass（'inactive'））
.removeClass（'活动'）
.fadeOut（）；
$（'#listHeader'）.html（''+listName+''）；//在标题中显示当前活动（新）列表
$（“#listMaster”）.prepend（“”）；//将新列表添加到#listMaster
$（“#列表列表”）.prepend（““+listName+” ”）；//将列表标题添加到#侧边栏。
})；//添加新的列表事件处理程序
$（'#listHeader'）。在（'单击'，'h3'，函数（）{
$（this）.inlineEdit（替换为，连接为）；
})；//内联重命名代码
}());
好的，仔细看看
replacewith
定义了一次（在开始时），但随后在模糊事件中删除了它（$（this）.remove（）
）。我看不出它在哪里被再次添加，因此它只能工作一次。提示：在您的问题中只包含相关代码。“只能重命名列表一次”列表“如何重命名”？可以在问题中包含js
？我认为最简单的方法是启动开发工具（通常是F12），并在代码中设置一个断点。然后运行并检查变量，看看第二次出现了什么问题。只是在我的手机上，所以很难看到，但我会特别检查replacewith和connectwith。查看并解释预期行为与您得到的结果的比较