为什么我的匿名闭包只执行一次

Why is my anonymous closure only executing once?

本文关键字：一次 执行 我的 闭包 为什么      更新时间：2023-09-26

我想在我的列表应用程序中添加一个功能，当页眉接收到.on('click')事件时，该功能允许用户内联重命名列表的标题。

我找到了一些允许内联编辑的代码(这里是fiddle。(

但是，当我将此代码包含在我的应用程序中的自动执行匿名闭包中时，我只能重命名列表一次。随后尝试重命名该列表会引发一个：NotFoundError: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist。

我的小提琴在这里

然而，上面jsFiddle的原始代码允许用户根据需要多次重命名单击的文本。

只需要多一双眼睛。我不明白为什么这个代码只运行一次，然后就出错了，但在它的原始版本中却能完美地工作。

<!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
}());

好的，仔细看。。。

replacewith定义过一次(一开始(，但后来在模糊事件中被删除($(this).remove()(。我看不出它在哪里被再次添加，所以它只能工作一次。

相关文章：