在生成的元素上绑定事件并获取其当前状态

Question

这是一个在元素上绑定 click 事件的插件，它生成一个带有 </code> 的容器，然后我绑定一个 <code>keypress</这个新的 <code><textarea></code> 上的 code> 事件，一切正常，但在 <code>keypress</code> 处理程序中我只能获取 <code>text().length< 的状态/code> 从最初的<code>点击</code>发生时算起。

如何获取 onKeyPress 函数来获取 </code> 在 <code>keypress</code> 发生时的状态？

$.fn.pluginTemp = function(options){
    var defaults = {
            editContainer:"<div class='editContainer'><textarea></textarea></div>",
            maxChar:20,
            onKeyPress:function(){
                    console.log($(".editContainer>textarea").text())
               }

     }
    var options = $.extend(defaults,options); 
    return this.each(function(i,e){
        var el = $(e), initText
        el.bind("click", function(){
            initText = el.text();
            el.parent().append(options.editContainer);
            el.parent().find(".editContainer>textarea").html(initText);
              // isn't this function remembering the state for when its is defined?  which is on keypress?          
               return function(){
                el.parent().find(".editContainer>textarea").bind("keypress",options.onKeyPress)
            }()

        })
    })
}

Answer 1

您可以尝试：

return this.each(function(i,e){
            var el = $(e), initText
            el.live('click', function() {
                initText = el.text();
                el.parent().append(options.editContainer);
                el.parent().find(".editContainer>textarea").html(initText);
                  // isn't this function remembering the state for when its is defined?  which is on keypress?          
                   return function(){
                    el.parent().find(".editContainer>textarea").bind("keypress",options.onKeyPress)
                }()

            })
        })

抱歉，尚未测试

Answer 2

我遇到了问题，

而不是通过 .html() 方法获取当前值，
我使用了 .val()

原因如下：
在 </code> 上使用时 <code>.html()</code> 方法仅查看 <code>textarea</code> 的初始状态，当您有 <code >.val()</code> 它对最新值进行采样。