Jquery 处理输入文本更改事件

我正在编写一个jQuery插件来模拟一个可编辑的div。
这是我的密码：

(function($){
    $.fn.editable = function(){
        return this.each(function(){
            var $this = $(this).hide();
            var div = $('<div>'+$this.val()+'</div>').show().insertAfter($this).data('input',$this);

            $this.data('div',div);

            div.dblclick(function(){
                $(this).hide();
                $(this).data('input').val($(this).text()).show();
            });
            $this.blur(function(){
                $(this).hide();
                $(this).data('div').html($(this).val()).show();                
            });

            $this.change(function(){
                $(this).data('div').html($(this).val());    
            });
        });
    };

})(jQuery);

（函数（$）{
$.fn.editable=函数（）{
返回此值。每个（函数（）{
var$this=$（this.hide（）；
var div=$（''+$this.val（）+''）.show（）.insertAfter（$this）.data（'input'，$this）；
$this.data（'div'，div）；
div.dblclick（函数（）{
$（this.hide（）；
$（this.data（'input'）.val（$（this.text（））.show（）；
});
$this.blur（函数（）{
$（this.hide（）；
$（this.data（'div'）.html（$（this.val（））.show（）；
});
$this.change（函数（）{
$（this.data（'div'）.html（$（this.val（））；
});
});
};
})（jQuery）；

到目前为止，还不错

现在，我想做的是，如果隐藏的输入值发生变化，则使div文本发生变化，但我不知道该如何做。
意味着，如果我执行

$（'#editable'）.val（'newtext'）

则div应该更改

---

我无法手动触发更改事件，因为输入更改将发生在我无法控制的其他插件中。

我建议您使jQuery插件支持如下所述的方法：

然后你会有这样的东西：

(function( $ ){

  var methods = {

    init : function( options ) { 
      return this.each(function() {
        var $this = $(this).hide();
        var div = $('<div>'+$this.val()+'</div>').show().insertAfter($this).data('input',$this);

        $this.data('div',div);

        div.dblclick(function(){
            $(this).hide();
            $(this).data('input').val($(this).text()).show();
        });
        $this.blur(function(){
            $(this).hide();
            $(this).data('div').html($(this).val()).show();                
        });
    },

    value : function( str ) {
      return this.each(function(){
        $(this).val(str);
        $(this).data('div').html($(this).val());
      });
    }
  };

  $.fn.editable = function( method ) {

    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.editable' );
    }    

  };

})( jQuery );

$('#editable').editable('new value that will sync the related div');
// instead of `$('#editable').value('...')`

我强烈建议您阅读作者关于jQuery的文章

---

更新由于我在理解问题时出错，我提出了以下建议解决方案。这不是最好的方法

我强烈建议您查看插件设计，因为我个人认为它不可访问。

但是，由于我看不到整个场景，下面的代码就可以了

(function() {

    // Store the original jQuery.val()
    var $$val = $.fn.val;

    // Add a hook.
    $.fn.val = function(s) {

      // Call your plugin change event.
      $(this).editable('change');

      // Delegate to the original jQuery.val function.
      return $$val.apply(this, Array.prototype.slice.call(arguments));
    };

  // Your plugin stuff...
})

---

HTH

当您双击

编辑

时，您正在用此行覆盖输入值：

$（this.data（'input'）.val（$（this.text（））.show（）；

如果未触发

.change（）

事件（如您所示），则表示您正在使用div的“旧”内容覆盖外部插件所做的更改。请删除

.val（）

，以避免出现此问题

$（this）.data（'input'）.show（）；

除了依赖外部插件触发

.change（）

，您还可以通过轮询来检查值。虽然在事件可用的情况下不建议这样做，但如果合理设置轮询间隔，则不会产生太大影响。由于您处理的是以表单形式输入数据的人，因此我猜您不需要每隔250毫秒进行一次轮询

---

有关检查当前值并在发生更改时触发

.change（）

的包装器的信息，请参阅。请参阅以代码为基础的示例。

看看这个，在插件中，您可以像这样扩展val函数，以便在使用val函数更改值时触发更改事件

---

您能否详细说明

$（“#可编辑”）.val（）

的工作原理？为什么是

val（）

而不是

html（）

？哪个元素的id是可编辑的？@palintropos更新了我的JSFIDLE作为旁白，您是否查看了

contentedItable

？我相信它得到了非常彻底的支持。你可以用

jQuery.valHooks

来实现这一点，但是你的插件设计需要修改。研究合适的插件设计。如果其他插件正在修改他们不“拥有”的输入字段，那么他们有责任执行

。trigger（'change'）

。也许您可以联系插件所有者进行此更改？我可以添加

。触发器（'change'）

不容易吗？但是输入将被其他插件所使用，所以它只会是

.val（'newtext'）

为了避免负面影响，我将尝试用一个JSFIDLE和您描述的行为来说明我建议的答案。我已经写了我的jQuery可编辑插件，我已经遇到了这种常见的情况，我很确定这种方法会满足你的要求。@kiros，我在回答之前阅读了整个问题。你测试过或者至少测试过我的答案吗？提问者明确地说输入的改变将发生在我无法控制的其他插件中。你是对的@kiros我建议的答案在这种情况下不起作用。@sonia:你在IE中测试吗？IE（可能还有其他浏览器）对包含内容类型不正确的脚本很挑剔。我v@sonia：正确的内容类型应为。我已经找到了不适合的内容类型。出于测试目的，您可以将整个

.changePolling（）

源代码复制粘贴到JSFIDLE中，然后运行它。这将为在

.val（）

之后正确调用

.change（）

的插件触发双重

.change（）

事件。该技术可以与输入列表相结合，因此（在本例中）只有

$（“#可编辑”）.val（“新值”）

触发更改。（“正确”取决于插件的用途，我想。）您能解释更多或者给我一些示例吗？$input.change（）；已经在自定义val函数中注入了，那么您再次调用该更改的方式是什么？这是第三方插件的一个很好的例子。与原来的问题相反，“我无法手动触发更改事件，因为输入更改将发生在我无法控制的其他插件中……”是的，这是一个很好的例子，但在这四个问题中，插件不会调用“更改”对吗？